css3动画有哪些属性
时间:2021-04-09 来源:互联网
今天PHP爱好者给大家带来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;
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动画有哪些属性的详细内容,更多请关注php爱好者其它相关文章!
-
手是什么梗?揭秘网络热词手的搞笑含义和出处,看完秒懂! 2025-10-14
-
手速梗是什么梗?揭秘网络热词手速梗的爆笑含义和快速反应技巧! 2025-10-14
-
想知道手套是什么梗?揭秘网络热词背后的搞笑真相,一秒get笑点! 2025-10-14
-
手游海豹是什么梗?揭秘玩家炫耀欧气的网络热词,看完秒懂! 2025-10-14
-
手指梗是什么梗?揭秘网络热门手势梗的爆火真相,看完秒懂! 2025-10-14
-
燕云十六声心法毕业极速版-一个月一本六重流派 2025-10-14