1、 @keyframes规则
@keyframes规则用于创建动画,在@keyframes中规定某项css样式,就能创建由当前样式逐渐过渡为新样式的动画效果。
定义动画的方式有两种:
1)
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes move{
from{
background: #00FFFF;
}
to{
background: #f66;
}
}
.wrap{
width: 100px;
height: 100px;
background: #f66;
animation: move 5s;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
2)
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes move{
0%{
background: #00FFFF;
}
100%{
background: #f66;
}
}
.wrap{
width: 100px;
height: 100px;
background: #f66;
animation: move 5s;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
动画是使元素从一种样式逐渐变化为另一种样式的效果,你可以改变任意多的样式任意多的次数。关键词"form"和"to"等同于0%和100%,0%是动画的开始,100%是动画的完成。
2、将动画绑定达到选择器
当在@keyframes中创建动画时,要把它捆绑到某个选择器,才会产生动画效果。至少要规定以下两项css3动画属性,才可以把动画绑定到选择器:
- 动画的名称
- 动画的时长
例如:把“move”捆绑到div
.wrap{
width: 100px;
height: 100px;
background: #f66;
animation: move 5s;
}
3、CSS3动画属性
1)animation-name 定义一个或多个动画的名称
2)animation-duration 动画执行的时间
0:动画不执行
正数
3)animation-delay 动画执行的延迟时间
0:不延迟,立即执行
负数:延迟之前的动画被截断
正数:按照设置的时间延迟
4)animation-interation-count 设置动画执行的次数
正数:按照设置的时间执行
infinate:无限循环
5)animation-timing-function 动画的运动方式
linear、ease、ease-in、ease-out、ease-in-out
6)animation-direction 动画运动的方向
normal:正常运动
reverse:反向运动
alternate:正反方向交替运动
alternate-reverse:与alternate正好相反
7)animation-fill-mode:设置对象动画时间之外的状态
name:默认值
forwad:保持动画结束时的状态
backwards:保持动画开始时的状态
both:遵循forwards和backwards两种规则
属性介绍
animation-fill-mode它能够控制元素在动画执行前和动画执行后的样式。一个带有延迟(animation-delay),并且按正常方向(animation-direction:normal)执行的动画,动画按执行时间来划分,分为3个过程,动画等待、动画进行、动画结束。默认情况下,只有在动画进行状态,才会执行用@keyframes所声明的动画;而在动画等待和动画结束状态,对元素样式并不会产生任何影响。
-
none
取值为none,不会对动画等待和动画结束的元素样式发生改变 -
forwards
动画结束后,元素的样式将设置为最后一帧的样式。 -
backwards
在动画等待的时间,元素的样式将设置为动画第一帧的样式。从技术上讲,每一个动画都有一个默认的延迟时间,只不过这个时间是0,所以你并没有看到其中的变化。
backwards:动画等待的时间,元素的样式将设置为动画第一帧的样式。如果给动画设置一个1s的延迟,元素在等待的这1s内,元素的样式设置为动画第一帧(也就是@keyframes中的from或0%)的样式。 -
both
同时应用forwards和backwards两个属性值的效果,意味着在动画等待和动画结束状态,元素分别应用动画第一帧和最后一帧的样式。
8)animation-play-state:设置对象动画的状态(控制动画运行或暂停)
running:默认值
paused:暂停运动
复杂的写法:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
简单的写法:
div
{
animation: myfirst 5s linear 2s infinite alternate;
}