Animations动画和Keyframes关键帧
Posted 小结巴巴吧
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Animations动画和Keyframes关键帧相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body { display: flex; /* 使用Flex布局 */ justify-content: center; /* 水平居中 */ } .ball { width: 100px; height: 100px; border-radius: 50%; /* 把正方形变成圆形*/ background-color: #FF5722; /* 设置颜色为橙色*/ animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5); animation-direction: alternate; //alternate(2,4,6)反向动画 animation-iteration-count: infinite; } @keyframes bounce { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 200px, 0) rotateX(45deg); } } </style> <body> <div class="ball"></div> <script> </script> </body> </html>
以上是关于Animations动画和Keyframes关键帧的主要内容,如果未能解决你的问题,请参考以下文章
P24:React高级-CSS3的关键帧keyframes动画