这篇文章主要讲解了“css3动画的属性有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3动画的属性有哪些”吧！
css3动画属性有：“@keyframes”、animation、animation-name、animation-duration、animation-delay、animation-direction等等。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3动画属性：
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
示例：使用css3动画属性制作简单动画
计算
安全
数据库
网络和加速
企业服务
body {
background-color: #fff;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
min-width: 320px;
max-width: 500px;
}
.element {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #0099cc;
border-radius: 50%;
position: relative;
top: 0;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
from {
top: 100px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
top: 50px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
top: 150px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
top: 75px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
@keyframes bounce {
from {
top: 100px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
top: 50px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
top: 150px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
top: 75px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}3、运行效果
感谢各位的阅读，以上就是“css3动画的属性有哪些”的内容了，经过本文的学习后，相信大家对css3动画的属性有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
