其他回答《H5篇：页面中实现动画的几种方式？（附代码）》中，带大家一起掌握页面上完成动画几类方法。下边本文为大家介绍如何使用CSS3来达到一个简单漂亮的动态效果，我们一起看看
备考下 css3 的影片， 都快要不容易写，那时候蛮喜欢 flash 的，太可惜了时期前进。写这儿就当文本文档一下吧
浏览器支持
Internet Explorer 10、Firefox 及其 Opera 适用 animation 特性。
Safari 和 Chrome 适用取代的 -webkit-animation 特性。
注解：Internet Explorer 9 及其更早版本号不兼容 animation 特性。
概念定义使用方法
animation属性一个缩写特性，用以设定六个动漫特性：
animation-name
animation-duration
animation-timing-function animation-delay
animation-iteration-count animation-direction
词法
animation: name duration timing-function delay iteration-count direction;
| 值 | 叙述 | 备注名称 |
|---|---|---|
| animation-timing-function | 要求动画速度曲线 | 可选值为 linear ，ease（淡入淡出），ease-in，ease-out ，ease-in-out，cubic-bezier(n, n, n, n) |
| animation-play-state | 要求动漫是不是后台运行或中止。 | paused 表明脱机工作，running 表明工作状态 |
| animation-name | 要求必须关联到选择符的 keyframe 名字 | @keyframe { from {opcity:0} to {opcity:1}} |
| animation-iteration-count | 要求动漫应当播放频次 | 可给值为 infinite（不限次数）n（例如 5 次） |
| animation-fill-mode | 动漫在播放视频以前或以后，其动态效果是不是由此可见。 | none（默认设置） / forwards（动漫结束后） / backwards（在动漫表明以前） / both（二者）; |
| animation-duration | 要求进行动漫所花费的时间，以秒或ms计 | 务必要求不然，不遵守动漫 |
| animation-direction | 要求是否该轮着反方向播放动画 | 初始值 normal，alternate 为动漫应当轮着反方向播放视频。左右左 |
| animation-delay | 要求在动漫开始前的延迟时间 | 界定动漫开始之前等待时间，以秒或ms计。初始值是 0。单位是 s |
关于keyframe的概念
Firefox适用取代的@-moz-keyframes标准；
Opera适用取代的@-o-keyframes标准；
Safari和Chrome适用取代的@-webkit-keyframes标准；
选值适用 0-100% 和from，to。
@keyframes move {
0% {
top: 0px;
left: 0px;
}
25% {
top: 200px;
left: 200px;
}
50% {
top: 100px;
left: 100px;
}
75% {
top: 200px;
left: 200px;
}
100% {
top: 0px;
left: 0px;
}
}
@keyframes move {
from {
top: 0px;
left: 0px;
}
to {
top: 0px;
left: 100px;
}
}demo 写了一个事例，地球围绕太阳转
以下属于编码
<!-- html 一部分 -->
<div style="width:700px; ">
<div class="t">
<div class="t1"></div>
</div>
</div>/* css 一部分 */
@keyframes t {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes t {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.t {
height: 500px;
width: 500px;
position: relative;
border-radius: 50%;
transform: scale(.8);
border: 1px solid #dedede;
&::before {
content: "";
width: 50px;
height: 50px;
background: radial-gradient(72px, #f00, #ff0, #080);
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-top: -25px;
margin-left: -25px;
box-shadow: 0 0 37px #fcff4a;
}
.t1 {
height: 20px;
border-radius: 50%;
width: 20px;
margin-top: -10px;
top: 50%;
left: -10px;
background: radial-gradient(26px, #0082ff, #184608, #003ade);
position: absolute;
animation: t 3s infinite linear;
transform-origin: 260px center;
}
}
</style>还有一个 demo ，在这儿https://k-ui.cn
强烈推荐学习培训CSS3视频教学
以上就是关于教你如何如何使用CSS3完成动态效果（编码共享）的具体内容，大量欢迎关注AdminJS其他类似文章！