1. transition动画:鼠标移上去 旋转放大
关键点-- :hover \ transform: scale(*) rotate(*deg)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
2.关键帧动画: 位移动画
translateY(-100%)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.box{ width: 300px; height: 300px; } .cd-reveal-down{ border: 1px solid #cdf0f9; width: 200px; height: 100px; -webkit-animation: cd-reveal-down 2s 1; animation: cd-reveal-down 2s 1; } @-webkit-keyframes cd-reveal-down{ 0% { opacity: 0.5; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes cd-reveal-down{ 0% { opacity: 0.5; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
html
<div class="box"> <div class="cd-reveal-down">cd-reveal-down</div> </div>
3.关键帧动画: 位移动画, 元素向上向下微幅震动 infinitite
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.m-arrow{ width: 20px; height: 20px; border: 1px solid #cdf0f9; background: #0f00f0; animation: arrowdown 2s ease-in-out infinite; -webkit-animation: arrowdown 2s ease-in-out infinite; } @-webkit-keyframes arrowdown{ 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes arrowdown{ 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }
html
<div class="m-arrow"></div>