CSS3-动画
2019-02-15 本文已影响73人
riverhh
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
animation.png
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
体验动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/* animation动画名称 动画时间 运动曲线 何时开始 播放次数 是否反向 */
animation: go 2s ease-in 0s infinite normal;
}
/* @keyframes 动画名称 */
@keyframes go {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
展示如下所示：
动画.gif
