css3动画@keyframes
一、了解动画
CSS3中我们可以用@keyframes规则创建动画,它可以取代许多网页动画图像,Flash动画,和JavaScript。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
二、定义动画
用百分比来规定变化发生的时间,0% 是动画的开始,100% 是动画的完成。【或用关键词 “from” 和 “to”,等同于 0% 和 100%。】
注:推荐定义 0% 和 100% 选择器。
三、动画属性
1. @keyframes
规定动画。
<style>
/*
@keyframes animationname【动画名称】 {
keyframes-selector【动画选择器,动画持续时间的百分比】 {css-styles【一个或多个css样式属性】}
}
*/
/*例如:*/
@keyframes mymove {
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
/* Safari and Chrome */
@-webkit-keyframes mymove {
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
2. animation
绑定一个动画到一个元素身上
例如:
div {
position: relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
@kryframes mymove {
0% {top: 0;left:0;}
100% {top: 20px;left:0;}
}
语法:
动画:名称 周期时间 方式{例:匀速} 延迟时间 迭代次数 非运行状态下样式 是否暂停动画
animation: name duration timing-function delay iteration-count direction fill-mode play-state;