您的位置：首页 > Web前端 > CSS

CSS3动画——@keyframes规则和animation属性

2017-02-07 14:58 633 查看

简介：@keyframes定义关键帧，即动画每一帧执行的是什么，animation是来定义动画的每一帧如何执行的。

一.@keyframe

语法：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname是动画名字；keyframes-selector帧选择器，用百分比定义，0%-100%，与from-to等价，作用是定义不同时间段的不同样式。

用法：

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

二. animation

该属性有8个动画属性，如下：

animation-name：keyframes名称；

animation-duration：指定完成动画所花费的时间，单位为秒（s）或毫秒（ms）；

animation-timing-function：

指定动画的速度曲线，该属性就不详细解释了，与transition的transition-timing-function相同，可见博客：http://blog.csdn.net/picking_up_stones/article/details/54866147

animation-delay：指定在动画开始之间的延迟，单位为秒（s）或毫秒（ms），若为负值表示跳过前几秒执行；

animation-iteration-count：指定动画应该播放的次数，默认为1次，自己也可以定义播放次数，如2, 3,

4…….，以及无限次infinite；

animation-direction：指定是否应该轮流反向播放动画。

a. normal：默认值，动画按正常播放;

b. reverse：动画反向播放;

c. alternate：动画在奇数次正向播放，在偶数次反向播放；

d. alternate-reverse：动画在奇数次反向播放，在偶数次正向播放；

e. initial：设置该属性为它的默认值；

f. inherit：从父元素继承该属性。

animation-fill-mode：指定当动画不播放时要应用到的样式（当动画完成时或动画有一个延迟未开始播放时）

a. none：默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

b. forwards：表示动画在结束后继续应用最后的关键帧的位置

c. backwards：会在向元素应用动画样式时迅速应用动画的初始帧

d. both：元素动画同时具有forwards和backwards效果

animation-play-state：指定动画是否正在运行或已暂停，当要实现视频播放效果时使用

a. paused：指定动画暂停；

b. running：指定动画运行；

三. 小例子

<!DOCTYPE html>
<html>
<head>
<title>@keyframe规则和animation动画的练习</title>

<style type="text/css">

html,body
{
margin: 0;
padding: 0;
}

.demo
{
display: flex;
flex-direction: row;
justify-content: space-around;
background: black;
height: 670px;
}

.demo0
{
margin-top: 40%;
border-radius: 25px;
width: 50px;
height: 50px;
position: relative;
}

.demo1
{
animation: mymove 4s linear infinite;
}

.demo2
{
animation: mymove 4s ease-in-out 2s infinite;
}

.demo3
{
animation: mymove 4s ease-in infinite;
}

.demo4
{
animation: mymove 4s ease-out 1s infinite;
}

.demo5
{
animation: mymove 5s step-start infinite;
}

.demo6
{
animation: mymove 4s ease 2s infinite;
}

.demo7
{
animation: mymove 4s linear infinite;
}

.demo8
{
animation: mymove 4s ease-in-out 1s infinite;
}

.demo9
{
animation: mymove 4s ease-in infinite;
}

.demo10
{
animation: mymove 4s ease-out 1s infinite;
}

.demo11
{
animation: mymove 5s step-start infinite;
}

.demo12
{
animation: mymove 4s ease 2s infinite;
}

@keyframes mymove
{
0%   {top:-100px;background:red;}
25%  {top:-200px; background:blue;}
50%  {top:-300px; background:yellow;}
75%  {top:-400px; background:green;}
100% {top:-500px; background:red;}
}

</style>

</head>
<body>

<div class="demo">
<div class="demo0 demo1"></div>
<div class="demo0 demo2"></div>
<div class="demo0 demo3"></div>
<div class="demo0 demo4"></div>
<div class="demo0 demo5"></div>
<div class="demo0 demo6"></div>
<div class="demo0 demo7"></div>
<div class="demo0 demo8"></div>
<div class="demo0 demo9"></div>
<div class="demo0 demo10"></div>
<div class="demo0 demo11"></div>
<div class="demo0 demo12"></div>
</div>

</body>
</html>

运行效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 动画

相关文章推荐

新的分享

章节导航