CSS3动画的常见属性（CSS3）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3动画的常见属性</title><style>@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(1000px, 0);}}div {width: 100px;height: 100px;background-color: skyblue;/* 动画名称 *//* animation-name: move; *//* 持续时间 *//* animation-duration: 2s; *//* 运动曲线 *//* animation-timing-function: ease; *//* 何时开始 *//* animation-delay: 0.5s; *//* 重复次数 iteration 重复的 count 次数 infinite 无限 *//* animation-iteration-count: infinite; *//* 是否反方向播放 默认的是 normal 如果想要反方向 则 alternate*//* animation-direction: alternate; *//* 动画结束后的状态 默认的是backwa回到起始状态 我们可以让它停留在结束状态forwards *//* animation-fill-mode: forwards; *//* animation: name duration timing-function delay iteration-count direction fill-mode; */animation: move 2s linear 0s infinite alternate forwards;/* linear是匀速的意思 */}div:hover {/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */animation-play-state: paused;}</style>
</head><body><div></div>
</body></html>
支付宝扫一扫
微信扫一扫
