css3 动画

最新推荐文章于 2025-08-19 08:41:01 发布
转载 最新推荐文章于 2025-08-19 08:41:01 发布 · 66 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/vvch/p/4871641.html
文章标签：

#javascript #ViewUI

本文深入探讨了HTML、CSS和JavaScript中的过渡与动画技术，包括如何实现平滑的视觉变化，使用@keyframes创建关键帧动画，以及如何利用变形属性进行更复杂的动画效果。文章通过实例展示了如何应用这些技术来提升网页的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、过渡
    所有的过渡必须明确指定改变数值，height，width等必须是精确地数值或百分比，不能为auto；
    只要能明确改变属性数值的事件都可以触发过渡，class，JavaScript，hover等； 

   
  1. .height-animate {
  2.  -webkit-transition: -webkit-transform .3s ease-in-out, height .3s ease-in-out;
  3.  -moz-transition: -moz-transform .3s ease-in-out, height .3s ease-in-out;
  4.  -o-transition: -o-transform .3s ease-in-out, height .3s ease-in-out;
  5.  transition: transform .3s ease-in-out, height .3s ease-in-out
  6. }
  8. .all-animate {
  9.  transition: all .5s;
  10.  transition-property: all;
  11.  transition-duration: .5s;
  12.  transition-timing-function: initial;
  13.  transition-delay: initial;
  14. }

  

  

   2、动画
  

  

   

    

    
  1.  @keyframes anm {
  2.  0% {
  3.  width: 10px;
  4.  height: 10px;
  5.  }
  6.  50% {
  7.  width: 200px;
  8.  }
  9.  100% {
  10.  width: 200px;
  11.  height: 100px;
  12.  }
  13.  }
  15.  .demo {
  16.  display: inline-block;
  17.  background: green;
  18.  }
  20.  .demo:hover {
  21.  -webkit-animation-name: anm;
  22.  -moz-animation-name: anm;
  23.  -o-animation-name: anm;
  24.  animation-name: anm;
  25.  animation-timing-function: ease-in-out;
  26.  animation-duration: 2s;
  27.  animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/
  28.  }

   

   

    3、变形
   

  

  

   

    

     

     
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.  <meta charset="UTF-8">
  5.  <title></title>
  6.  <style>
  7.  .demo img {
  8.  transition: all 0.3s ease-in-out;
  9.  }
  11.  .demo img:hover {
  12.  transform: translate(100px) scale(1.5);
  13.  }
  15.  @keyframes anm {
  16.  0% {
  17.  transform: rotate(0deg)
  18.  }
  19.  50% {
  20.  transform: rotate(90deg)
  21.  }
  22.  100% {
  23.  transform: rotate(180deg)
  24.  }
  25.  }
  27.  .demo2 img:hover {
  28.  -webkit-animation-name: anm;
  29.  -moz-animation-name: anm;
  30.  -o-animation-name: anm;
  31.  animation-name: anm;
  32.  animation-timing-function: ease-in-out;
  33.  animation-duration: 2s;
  34.  animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/
  35.  }
  36.  </style>
  37. </head>
  38. <body>
  39. <div class="demo"><img src="img/question_mark.png">aaaaaa</div>
  40. <br>
  42. <div class="demo2"><img src="img/question_mark.png">aaaaaa</div>
  43. </body>
  44. </html>

    

    

     

    

   

  

  

   
   

  

 

 

 

 
 

 

 

  
附件列表

 

 
 


 

转载于:https://www.cnblogs.com/vvch/p/4871641.html

                

        




    

    
  



    



                



	

		

			

				
					
CSS3动画（秒懂创建与使用动画）

				
			

			

				

					百赢出品，必属精品
				

				

					04-18
					
					1492
					
				

			

		

		

			
				
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。CSS动画是通过CSS样式表来创建动态效果的技术。使用@keyframes规则定义动画的关键帧，描述动画在不同时间点的状态。使用animation属性将动画应用到元素上，包括动画名称、持续时间、时间函数、延迟等。使用等属性控制动画的延迟、重复次数、方向等。使用transition。

			
		

	



                

            
              



	

		

			

				
					
css3大绝技之animation动画

					
热门推荐

				
			

			

				

					wj624的博客
				

				

					04-27
					
					1万+
					
				

			

		

		

			
				
✨✨✨css3大绝技之animation动画
动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
制作动画分为两步:
1．先定义动画
2．再使用(调用)动画
✨✨🎈 动画的基本使用
✨🎈🎈 用keyframes定义动画（类似定义类选择器）
语法格式：
@keyformes 动画名称 {
    0% {
        width:100px;
    }
    100% {
        width:200px;
   

			
		

	



              


  
              

                


	

		

			

				
					
CSS3动画 animation

				
			

			

				

					qq_52301431的博客
				

				

					04-01
					
					2875
					
				

			

		

		

			
				
CSS3动画 animation

动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。


格式：

animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动


animation: onemove 5s ease-in-out 2s 3 alternate;




1、基本使用


1.1、语法fro

			
		

	





	

		

			

				
					
CSS3 animation详解

				
			

			

				

					Frank的博客
				

				

					03-01
					
					1254
					
				

			

		

		

			
				
使用animation属性定义CSS3动画需要2步：（1）定义动画:使用动画之前，必须使用@keyframes规则定义动画	 语法:0%表示动画的开始，100%表示动画的结束。0%和100%是必须的，不过在一个@keyframes规则中可以由多个百分比构成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比的话，...

			
		

	



		

			
		



	

		

			

				
					
H5页面利用css3动画以及定时器制作动画效果

				
			

			

				

					hy3528的博客
				

				

					03-06
					
					823
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl...

			
		

	





	

		

			

				
					
CSS3 动画

				
			

			

				

					Bella.的博客
				

				

					01-20
					
					1762
					
				

			

		

		

			
				
目录

1.1 动画的基本使用

1.2 动画序列

1.3 CSS3动画常见属性

1.4 CSS3动画简写

1.5 大数据热点图案例

1.6 速度曲线细节

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，自动连续播放等效果。

1.1 动画的基本使用

制作动画分为两步：先定义动画，在使用调用动画

1.用keyframes定义动画（类似定义类选择器）


@keyfra.

			
		

	





	

		

			

				
					
css3 动画的实现

				
			

			

				

					青蛙king的博客
				

				

					12-15
					
					2781
					
				

			

		

		

			
				
js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。

			
		

	





	

		

			

				
					
CSS3动画

				
			

			

				

					xy_is_fhh的博客
				

				

					11-25
					
					5718
					
				

			

		

		

			
				
动画(animation)是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1.动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)



2.元素使用动画








...

			
		

	





	

		

			

				
					
css3动画设置无效

				
			

			

				

					weixin_42369612的博客
				

				

					12-17
					
					3077
					
				

			

		

		

			
				
css3动画设置无效
原因1: 添加动画元素是行内元素**
解决: 设置为行内块级元素
原因2: diff算法的原因
这个遇到的情况比较少,但是我在开发中确实遇到了,讲讲经历吧

在做年度报告的时候,需要加一个动画效果,让文字逐行显示

然后我就获取到当前页面的每一行的元素
给元素加上动画属性样式
第一个页面没有问题,每一行都是逐行显示的
到了第二页,就没有逐行显示的效果了
我以为是没获取元素,或者js没有生效
调试之后发现都生效了,并且在控制台上查看元素的属性,已经加上了动画属性

这就很奇怪,然后再切换

			
		

	





	

		

			

				
					
css3动画属性animation

				
			

			

				

					过客如期的博客
				

				

					09-12
					
					2562
					
				

			

		

		

			
				
css3 animation动画属性
一，浏览器支持情况
		IE	  Firefox	Chrome	Safari	Opera
		Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
		
		Safari 和 Chrome 支持替代的 -webkit-animation 属性。
		
		注释：Internet Explorer 9 以及......

			
		

	





	

		

			

				
					
css3动画效果抖动解决方法

				
			

			

				

					09-22
				

			

		

		

			
				
无论选择哪种方法，都需要我们对CSS动画的基础知识有一定的了解，包括如何定义动画、如何通过不同的状态控制动画播放，以及对CSS选择器和类的正确使用。在实际开发中，灵活运用这些知识点，将有助于我们制作出更加...

			
		

	





	

		

			

				
					
发现两个有趣的CSS3动画效果

				
			

			

				

					09-25
				

			

		

		

			
				
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。  首先，让...

			
		

	





	

		

			

				
					
20个CSS3动画实战案例开发

				
			

			

				

					06-18
				

			

		

		

			
				
本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷...

			
		

	





	

		

			

				
					
微信小程序--几个有趣的css3动画

				
			

			

				

					03-29
				

			

		

		

			
				
微信小程序小教程--几个有趣的css3动画       先看下效果：  (此图片来源于网络，如有侵权，请联系删除! ) 除了有点快，动画效果还可以。 它是怎么实现的？ 拿第一个双块舞动画研究一下好啦。 mxml:      ...

			
		

	





	

		

			

				
					
CSS3动画特效_css3打开信封的留言表单效果

				
			

			

				

					05-18
				

			

		

		

			
				
摘要:脚本资源,CSS特效,CSS3,折页效果　CSS3特效动画，实现css3打开折叠的信封，抽出一个可以发表留言的表单，并响应鼠标动作，漂亮极了，感觉作者很有创意哦，国内朋友咋没有人能想到呢？本特效下载自国外网站，...

			
		

	





	

		

			

				
					
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法

					
最新发布

				
			

			

				

					张先森的博客
				

				

					08-19
					
					325
					
				

			

		

		

			
				
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。

			
		

	





	

		

			

				
					
E2B是一个开源基础设施，允许您在云中安全隔离的沙盒中运行AI生成的代码和e2b.dev网站

				
			

			

				

					skywalk8163的专栏
				

				

					08-17
					
					977
					
				

			

		

		

			
				
E2B是一个开源的云沙盒服务，允许在隔离环境中运行AI生成的代码。开发者需通过e2b.dev网站注册获取API key，并安装JavaScript或Python SDK来使用该服务。主要竞品包括CodeSandbox（侧重前端开发协作）和Replit（支持多语言在线编程）。E2B的核心优势在于为AI代码提供安全的执行环境，但需依赖其云端服务而非自建。使用示例展示了通过SDK在沙盒中运行简单Python代码的过程。

			
		

	





	

		

			

				
					
Layui COP证书管理系统 

				
			

			

				

					bemyrunningdog
				

				

					08-18
					
					408
					
				

			

		

		

			
				
本文介绍了一个基于Layui和SpringBoot的COP证书管理系统的完整实现方案。系统采用前后端分离架构，前端使用Layui2.8.3框架实现响应式界面，后端基于SpringBoot3.1.0和Java17开发，MySQL8.0作为数据库存储。系统实现了证书全生命周期管理（草稿、已提交、审核中、已签发、已拒绝五种状态），包含证书增删改查、批量操作、操作日志记录等核心功能。技术实现上，后端采用RESTful API设计，通过MyBatis操作数据库，前端使用Layui表格和表单组件实现数据展示和交互。系统

			
		

	





	

		

			

				
					
学习链接。

				
			

			

				

					weixin_49035434的博客
				

				

					08-18
					
					456
					
				

			

		

		

			
				
hello 算法 0.2   如何使用本书 - Hello 算法代码随想录: 代码随想录被删的前端游乐场 被删的前端游乐场Github漫游指南 : Github ebookJaveScript源码: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js世峰的刷题网站: labuladong 的算法笔记 | labuladong 的算法笔记编程导航: 编程导航 - 程序员一站式编程学习交流社

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值