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

css3模块之动画animation

2016-12-13 14:03 190 查看

在animation出来之前，动画效果需要通过js实现，但是animation的诞生可以说是css3中非常独特的属性之一

基本用法，这里用连写属性来说明

----animation:动画名动画所需时间动画曲线延迟时间动画重复次数是否往复。

一般来说，

动画名可以随意指定，这个属于用户自定义；

动画曲线以匀速运动最为常见（linear）；

延迟时间就表示延迟多少时间执行动画；

重复次数制定1、2、3皆可，如果需要无限循环，就可以将重复次数设置为infinite；

是否往复表示规定是否轮流反向播放动画。

给某个元素绑定动画后，就需要给自己定义的动画名增加相应的效果，格式如下：

@keyframes
动画名{

from{

xxxx

}

to{

xxxx

}

}

也可以将from to写成百分比的形式，就是说，当动画时间达到制定百分比的时间时，会执行相应的动画效果。

上代码(from to形式)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
*{ padding: 0; margin: 0;}
div{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left:0;
animation:play 10s linear 0.5s infinite alternate;
}
@keyframes play {
from{
left:0;
}
to{
left:500px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

除了以上注明的取值外，animation还增加了一个非常实用的属性，animation-play-state，默认是running，就是动画会一直跑，如果我们需要暂停动画怎么做呢？这时就可以用到它的另外一个取值------paused。

animation-play-state：paused表示立即暂停动画，一般会配套伪类选择器中的hover一起使用。

参考文献：点击打开链接

css3动画经典实例：行走的人类

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

标签： css html css3 web 动画

相关文章推荐

新的分享

章节导航