Rumah >hujung hadapan web >tutorial css >css3-动画（animation）效果的实现
css3-动画（animation）效果的实现
- 青灯夜游asal
- 2018-09-12 18:05:072358semak imbas
本章给大家介绍css3-动画（animation）效果的实现，让大家了解一个简单的css3动画是如何实现的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css3-动画（animation）：
具有以下属性：
1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值：paused 指定暂停动画 ； running 指定正在运行的动画，默认。
代码实例（以平移--translate为例说明动画的整个过程）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.warp {
height: 100px;
width: 100px;
border: 1px solid #eee;
background-color: #21B4BB;
animation-name: moves;
animation-direction: alternate;
animation-delay: 0.2s;
animation-duration: 5s;
animation-play-state: paused;
animation-iteration-count: 3;
/*以上可以简写成：*/
animation: moves 5s linear 0.2s 3;
}
@keyframes moves {
/*动画名称自定义*/
10% {
background-color: #21B4BB;
/*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
transform: translate(100px, 0);
-ms-transform: translate(100px, 0);
/*IE 9*/
-moz-transform: translate(100px, 0);
/* Firefox */
-webkit-transform: translate(100px, 0);
/* Safari 和 Chrome */
-o-transform: translate(100px, 0);
/* Opera */
}
30% {
background-color: #008000;
/*时间点可以任意*/
transform: translate(100px, 100px);
-ms-transform: translate(100px, 100px);
/*IE 9*/
-moz-transform: translate(100px, 100px);
/* Firefox */
-webkit-transform: translate(100px, 100px);
/* Safari 和 Chrome */
-o-transform: translate(100px, 100px);
/* Opera */
}
60% {
background-color: #444444;
/*时间点可以任意*/
transform: translate(0, 100px);
-ms-transform: translate(0, 100px);
/*IE 9*/
-moz-transform: translate(0, 100px);
/* Firefox */
-webkit-transform: translate(0, 100px);
/* Safari 和 Chrome */
-o-transform: translate(0, 100px);
/* Opera */
}
100% {
background-color: #70DBDB;
/*时间点可以任意*/
transform: translate(0, 0);
-ms-transform: translate(0, 0);
/*IE 9*/
-moz-transform: translate(0, 0);
/* Firefox */
-webkit-transform: translate(0, 0);
/* Safari 和 Chrome */
-o-transform: translate(0, 0);
/* Opera */
}
}
</style>
</head>
<body>
<div class="warp">
</div>
</body>
</html>效果图：
Atas ialah kandungan terperinci css3-动画（animation）效果的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：什么是web标准？？Artikel seterusnya：css如何隐藏页面元素？css 隐藏元素的四种实现方法以及之间的区别（代码实例）