web前端学习

概述

动画是CSS3中新增的属性，它可以替代一部分Flash或JavaScript定义的动画。创建CSS动画需要使用@keyframes规则，在该规则中定义某CSS样式，就能创建由当前样式逐渐改变为新样式的动画。

1.定义动画

要定义CSS动画，需要先使用@keyframes规则来声明关键帧。还需要为动画命名，便于后面引用。定义方法如下：方法1： @keyframes 动画名称{ from{声明列表1} to{声明列表2} } 方法2： @keyframes 动画名称{ 0%{声明列表1}} 25%{声明列表2} …… 100%{声明列表n} }

	
.animation_father_class:hover>#animation_test1{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
}
@keyframes animate_test1{
	from{
		margin-left:0px;
	}
	to{
		margin-left: 250px;
	}
}

	
.animation_father_class:hover>#animation_test2{
	animation-name: animate_test2;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
}
@keyframes animate_test2{
	0%{
		margin-left:0px;
	}
	50%{
		margin-left:200px;
	}
	100%{
		margin-left:250px;
	}
}

2.动画名称animation-name

属性名称：animation-name。属性的值：动画名称。属性作用：规定指定元素的动画名称，以便使用@keyframes规则定义动画。

比如下面代码显示的，当某个元素被hover的时候，播放名字为animate_test1的动画

	
.animation_father_class:hover>#animation_test1{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
}

3.动画花费时间animation-duration

属性名称：animation-duration。属性的值：动画花费时间。属性作用：规定指定元素完成动画的时间。

如下表示，当某个元素被hover的时候，则播放名字为animate_test1的动画，且动画的播放时间为5秒

	
.animation_father_class:hover>#animation_test1{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
}

4.动画速度曲线animation-timing-function

属性名称：animation-timing-function。属性的值：动画的速度曲线，值同过渡transition中的速度曲线属性取值。属性作用：规定指定元素完成动画时的速度变化。

可选值	释义
linear	默认值，过渡效果从开始到结束都是相同速度
ease	过渡效果以慢速开始，中间加速，以慢速结束
ease-in	过渡效果以慢速开始
ease-out	过渡效果以慢速结束
ease-in-out	过渡效果以慢速开始和结束
cubic-bezier（n,n,n,n）	cubic-bezier函数中自定义过渡效果速度曲线

	
.animation_father_class:hover>#animation_test5{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
	animation-timing-function: linear;/* 动画播放速度为线性 */
}

	
.animation_father_class:hover>#animation_test6{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
	animation-timing-function: ease-in-out;/* 动画播放速度为线性 */
}

5.动画开始前延迟时间animation-delay

属性名称：animation-delay。属性的值：动画开始前等待的时间。属性作用：规定指定元素完成动画前等待的时间。

	
.animation_father_class:hover>#animation_test7{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
	animation-timing-function: ease-in-out;/* 动画播放速度为线性 */
	animation-delay: 2s;/*动画延迟2秒播放*/
}

6.动画播放次数animation-iteration-count

属性名称：animation-iteration-count。属性的值：动画播放次数。属性的作用：规定指定元素播放动画的次数。

	
#threeD_test_father3{
	perspective: 100px;
	perspective-origin: 0% 0%;
}
.threeD_father_class:hover>#threeD_test6{
	transform: translate3d(100px,25px,50px) scale3d(4,2,8) rotate3d(1,1,1,180deg); */
}

7.轮流反向播放动画animation-direction

属性名称：animation-direction。属性的值：alternate。动画播放允许轮流反向播放。属性作用：规定指定元素动画奇数次播放为正向播放，偶数次播放为反向播放。

可选值	释义
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性

	
.animation_father_class:hover>#animation_test9{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
	animation-timing-function: ease-in-out;/* 动画播放速度为线性 */
	animation-delay: 0s;
	animation-iteration-count: 3;
	animation-direction: alternate;/*动画往复播放*/
}

8.动画animation

属性名称：animation。属性作用：动画的简写属性，用于设置六个动画属性。属性的值：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction。其中animation-name和animation-duration属性为必须设置，否则时长为0，就不会播放动画了。其他属性可以缺省。

	
.animation_father_class:hover>#animation_test10{
	animation-name: animate_test1;/* 动画名称 */
	animation-duration: 5s;/* 动画花费时间 */
	animation-timing-function: ease-in-out;/* 动画播放速度为线性 */
	animation-delay: 0s;/* 延迟0秒 */
	animation-iteration-count: 3;/* 播放3次 */
	animation-direction: alternate;/* 播放方向为正反正反直到播放结束 */
	
	/*动画简写，一条等于以上所有*/
	animation: animate_test1 5s ease-in-out 0s 3 alternate;
}