【从无到有】教你使用animation做简单的动画效果

今天写写怎么用animation属性做一些简单的动画效果

在CSS选择器中，使用animition动画属性，调用声明好的关键帧

首先声明一个动画（关键帧）：

@keyframes name{
	from{
　　　　}
	to{
　　　　}

}

@keyframes name{
	0%{
　　　　}
	50%{
　　　　}
        100%{
       }
}    

阶段写法：

①每个阶段用百分比表示，从0%到100%

②起止必须设置，即0%和100%或者from和to

 

通常根据不同内核的浏览器要加上不同的前缀

比如：chrome、safari：@-webkit-keyframes

 

【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)

Animation-duration 动画持续时间

Animtaion-timing-function动画速度曲线 常选ease

Animtaion-delay 动画延迟时间

Animation-iteration-count 播放次数，默认为1，无限次Infinite

Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）

* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）

>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……

举个例子：

新建一个div

<div class="div3"></div>

定义一个动画

@-webkit-keyframes myframe{
				0%{
					background-color: #7FFFD4;
				}
				25%{
					background-color: coral;
				}
				50%{
					background-color: cornflowerblue;
				}
				100%{
					background-color: cyan;
				}
			}

　　

给这个div加上一些属性

.div3{
				width: 100px;
				height: 100px;
				background-color: #7FFFD4;
				-webkit-animation: myframe 5s ease infinite;
			}

　　

 这样就可以看到一个四个颜色不停变化的正方形了