用CSS3产生动画效果

最新推荐文章于 2020-03-01 11:59:25 发布

deng88673

最新推荐文章于 2020-03-01 11:59:25 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/it-body/p/5871988.html

版权

相关属性：

@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 animation</p>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/it-body/p/5871988.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

deng88673

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS3产生动画效果

相关属性：@keyframes规则：定义动画语法：@keyframes animationname{keyframes-selector {CSS-style;}}animationname:动画名称keyframes-selector:动画持续百分比（0%~100%) from(表示0%） to(表示100%)CSS-style:要设置的样式；如定义一个名称...
复制链接

扫一扫