css3动画
@keyframes 动画名 {
0%
{
}
100%
{
}
}
元素执行动画
animation: 动画名 运动时间 运动曲线
01运动的汽车.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img { animation: move 5s infinite; } /*定义动画*/ @keyframes move { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(800px,0,0); } 51% { /*多组变形 空格隔开即可*/ transform: translate3d(800px,0,0) rotateY(180deg); } 100% { transform: translate3d(0,0,0) rotateY(180deg); } } </style> </head> <body> <img src="car.jpg" alt="" width="100" /> </body> </html>
