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爱好者其它相关文章!
-
地下城堡416章旧都怎么打-地下城堡416章旧都通关技巧 2025-09-16
-
三角洲行动s6赛季有什么-三角洲行动s6赛季更新内容 2025-09-16
-
地下城堡4军团币怎么获取-军团币道具作用详解 2025-09-16
-
顶级弓箭手技能怎么搭配-技能搭配详解 2025-09-16
-
崩坏星穹铁道昔涟技能怎么用-昔涟技能搭配 2025-09-16
-
想知道天花板梗的最新玩法?揭秘网络热梗天花板背后的爆笑真相,一秒get全网热议焦点! 2025-09-16