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-06-30
-
DOGE币最新价格行情与未来走势分析 2025-06-30
-
龙石战争测试服怎么下载-测试资格获取方法 2025-06-30
-
远光84最强武器有哪些-强势枪械推荐 2025-06-30
-
异环是手游还是端游-异环平台属性解答 2025-06-30
-
AI伴侣:在市场逆势上扬后,AIC能否突破0.19美元大关? 2025-06-30