<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .home { width: 100%; height: 100px } .son{ height: 50px; width: 50px; background: coral; animation: sonAnim 1s linear; //定义动画的时间，或者是否重复执行这个动画infinet } @keyframes sonAnim{ //定义关键帧，还可以增加50%时候的子对象 0%{ transform: translateX(0); //这里还可以定义旋转动画、或者left、right值 } 100%{ transform: translateX(100px); } } </style> </head> <script> </script> <body> <div class="home"> <div > <div class="son"/> </div> </div> </body> </html>
html、JS、CSS中的动画
猜你喜欢
转载自www.cnblogs.com/Oldz/p/12558907.html
今日推荐
周排行