css3动画

CSS3中的动画 ？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

animatiom

 原理：逐帧动画。会把整个运动过程，划分成100份

anmiation-name: 规定 @keyframes 动画的名称。(自定义的)

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; 
}

@keyframes 定义和用法

 @keyframes 动画的名字 {
	        from {}   
	        to {}
	        或 0%{}
	        	100%{}
	    }
<!-- from : 起点位置 , 等价于 0%  to : 终点位置 ，等价于 100%
0% 是动画的开始时间，100% 动画的结束时间
注：默认情况下，元素运动完毕后，会停到起始位置。 -->

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

animation-duration : 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

animation-delay : 属性定义动画何时开始，值以秒或毫秒计。（允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。）

div
animation-delay:2s;
 
animation-delay: -2s  
 

animation-iteration-count :

	animation-iteration-count :属性定义动画的播放次数 ，默认值就是1 ，infinite无限次数
	    
	 ## animation-timing-function : 动画的运动形式
	 
	 linear	:动画从头到尾的速度是相同的。 
	 
	ease	:默认。动画以低速开始，然后加快，在结束前变慢。	 
	
	ease-in	:动画以低速开始。	 
	
	ease-out	:动画以低速结束。	 
	
	ease-in-out	:动画以低速开始和结束。	
	 
	cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode 属性

	语法： animation-fill-mode : none | forwards | backwards | both;
	
	animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
	 
	none (默认值)  : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
	
	backwards  :  在延迟的情况下，让0%在延迟前生效
	
	forwards  :  在运动结束的之后，停到结束位置
	
	both  :  backwards和forwards同时生效	

animation-direction 定义和用法

	animation-direction  属性定义是否应该轮流反向播放动画
	
	animation-direction  :  属性定义是否应该轮流反向播放动画。
	
	alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
	
	reverse : 永远都是反向 , 从100%~0%
	
	normal (默认值) : 永远都是正向 , 从0%~100%

animation-play-state 定义和用法

	 animation-play-state 属性规定动画正在运行还是暂停。
		  		语法：animation-play-state: paused|running;
				 paused：规定动画已暂停。
				 running：规定动画正在播放。

CSS3动画是我2020.2.17-2.21疫情期间 逆战班级 学到的知识点之一，祝大家早日拿下H5大前端，成为优秀的前端工程师。fighting！！！