用CSS3产生动画效果
程序员文章站
2022-04-24 20:47:21
...
相关属性:
@keyframes规则:定义动画
语法:@keyframes animationname{keyframes-selector {CSS-style;}}
animationname:动画名称
keyframes-selector:动画持续百分比(0%~100%) from(表示0%) to(表示100%)
CSS-style:要设置的样式;
如定义一个名称为myanimation的动画:
@keyframes myanimation{
0% {font-size:10px;}
50% {font-size:30px;}
100% {font-size:100px;}}
animation属性:是以下属性的复合
animation-name:动画的名称
animation-duration:动画完成时间
aniamtion-timing-function:动画速度设置(linar/ease/ease-in/ease-out/ease-in-out)
animation-delay:动画在启动前的延迟间隔
animation-iteration-count:播放次数(n/infinite)
animation-direction:动画播放方向(normal/reverse
doctype html>
html>
head>
meta charset="utf-8" />
style>
div{
width:400px;
height:400px;
background-color:grey;
}
p{
color:red;
animation:myanimation 10s infinite;
}
@keyframes myanimation{
0% {font-size:10px;}
50% {font-size:30px;}
100% {font-size:100px;}
}
style>
head>
body>
div>
p>this is an animationp>
div>
body>
html>