如何在css3中使用animation属性

这篇文章给大家介绍如何在css3中使用animation属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画

animation-name属性为动画指定一个名称

animation-name兼容主流的浏览器,不过还是需要加前缀去兼容

animation-name有两个属性值,分别是keyframename和none

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
body{
margin:0auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0auto;
}
.container{
position:relative;
}
.inner,.middle,.outer,.pic{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.inner{
background:url(source/circle_inner.jpg)centerno-repeat;
animation-name:circle_inner;
}
.middle{
background:url(source/circle_middle.jpg)centerno-repeat;
animation-name:circle_middle;
}
.outer{
background:url(source/circle_outer.jpg)centerno-repeat;
animation-name:circle_outer;
}
.pic{
background:url(source/pic.jpg)centerno-repeat;
}
</style>
</head>
<body>
<divclass="container">
<divclass="inner"></div>
<divclass="middle"></div>
<divclass="outer"></div>
<divclass="pic"></div>
</div>
</body>
</html>

animation-duration 动画持续时间 默认是0

animation-timing-function 动画时间函数

animation-delay 动画延迟时间

animation-delay 属性定义动画什么时候开始,单位可以是秒(s)或毫秒(ms),允许负值,-2s使动画马上开始,但会跳过2s进入动画

animation-iteration-count 动画循环次数

animation-iteration-count: number | infinite 默认为1

animation-direction: normal | reverse | alternate | alternate-reverse 正常; 反向; 正反交替; 反正交替

alternate 和 alternate-reverse ,如果animation-itreation-count 不是设置成 infinite ,则只会执行一次就停止

animation-fill-mode 动画延迟未执行时,或者动画执行完毕后的停留状态(动画不能设置为循环,否则无法停止)

animation-fill-mode: none | forwards | backwards | both 无 结束状态 开始状态 看情况

animation-play-state: running | paused 动画运行状态:运行 | 暂停

animation 简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
body{
margin:0auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0auto;
}
.container{
position:relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.inner,.middle,.outer,.pic{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.container:hoverdiv{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
.inner{
background:url(source/circle_inner.jpg)centerno-repeat;
/*循环*/
-webkit-animation:circle_inner10sease-in-out1sinfinitealternaterunning;
-moz-animation:circle_inner10sease-in-out1sinfinitealternaterunning;
-ms-animation:circle_inner10sease-in-out1sinfinitealternaterunning;
-o-animation:circle_inner10sease-in-out1sinfinitealternaterunning;
animation:circle_inner10sease-in-out1sinfinitealternaterunning;
/*不循环,填充效果*/
/*-webkit-animation:circle_inner10sease-in-out1sforwardsrunning;
-moz-animation:circle_inner10sease-in-out1sforwardsrunning;
-ms-animation:circle_inner10sease-in-out1sforwardsrunning;
-o-animation:circle_inner10sease-in-out1sforwardsrunning;
animation:circle_inner10sease-in-out1sforwardsrunning;*/
}
.middle{
background:url(source/circle_middle.jpg)centerno-repeat;
-webkit-animation:circle_middle10sease-in-out1sinfinitealternaterunning;
-moz-animation:circle_middle10sease-in-out1sinfinitealternaterunning;
-ms-animation:circle_middle10sease-in-out1sinfinitealternaterunning;
-o-animation:circle_middle10sease-in-out1sinfinitealternaterunning;
animation:circle_middle10sease-in-out1sinfinitealternaterunning;
}
.outer{
background:url(source/circle_outer.jpg)centerno-repeat;
-webkit-animation:circle_outer10sease-in-out1sinfinitealternaterunning;
-moz-animation:circle_outer10sease-in-out1sinfinitealternaterunning;
-ms-animation:circle_outer10sease-in-out1sinfinitealternaterunning;
-o-animation:circle_outer10sease-in-out1sinfinitealternaterunning;
animation:circle_outer10sease-in-out1sinfinitealternaterunning;
}
.pic{
background:url(source/pic.jpg)centerno-repeat;
}
@keyframescircle_inner{
0%{transform:rotateX(0deg);}
50%{transform:rotateX(90deg);}
100%{transform:rotateX(360deg);}
}
@keyframescircle_middle{
0%{transform:rotateY(0deg);}
50%{transform:rotateY(90deg);}
100%{transform:rotateY(360deg);}
}
@keyframescircle_outer{
0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(90deg);}
100%{transform:rotateZ(360deg);}
}
</style>
</head>
<body>
<divclass="container">
<divclass="inner"></div>
<divclass="middle"></div>
<divclass="outer"></div>
<divclass="pic"></div>
</div>
</body>
</html>

如何在css3中使用animation属性

动画性能优化:

用position-fixed代替background-attachment

带图片的元素放在伪元素中

will-change

兼容性IE13+ 感觉可以放弃了&hellip;&hellip;

向下提示箭头效果

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
body{
margin:0auto;
background:#abcdef;
}
div{
width:30px;
height:30px;
position:fixed;
left:0;
right:0;
bottom:100px;
margin:0auto;
cursor:pointer;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:upDown2sease-in-outinfinite;
-moz-animation:upDown2sease-in-outinfinite;
-ms-animation:upDown2sease-in-outinfinite;
-o-animation:upDown2sease-in-outinfinite;
animation:upDown2sease-in-outinfinite;
}
@-webkit-keyframesupDown{
0%{bottom:100px;}
50%{bottom:80px;}
100%{bottom:100px;}
}
@-moz-keyframesupDown{
0%{bottom:100px;}
50%{bottom:80px;}
100%{bottom:100px;}
}
@-ms-keyframesupDown{
0%{bottom:100px;}
50%{bottom:80px;}
100%{bottom:100px;}
}
@-o-keyframesupDown{
0%{bottom:100px;}
50%{bottom:80px;}
100%{bottom:100px;}
}
@keyframesupDown{
0%{bottom:100px;}
50%{bottom:80px;}
100%{bottom:100px;}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>

关于如何在css3中使用animation属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

发布于 2021-03-21 22:40:48
收藏
分享
海报
0 条评论
161
上一篇:怎么在C++中使用const关键字 下一篇:如何在java中使用split()函数
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码