动画animation · web前端

[TOC] # 简介动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式： ~~~ animation:动画名称动画时间运动曲线何时开始播放次数是否反方向; ~~~ ![](https://img.kancloud.cn/e0/a9/e0a9c0827e5ddab9ac8dd17490da1bfd_861x454.png) 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r ~~~ @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } ~~~ ~~~ animation-iteration-count:infinite; 无限循环播放 animation-play-state:paused; 暂停动画" ~~~ # 体验动画 ~~~ <style> div { width: 100px; height: 100px; background-color: pink; animation: go 2s ease 0s infinite alternate; /*引用动画*/ /*animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;*/ /*动画名称是自己定义的 go google*/ /*infinite 无限循环*/ /*一般情况下，我们就用前2个 animation: go 2s*/ } /*@keyframes go {} 定义动画*/ @keyframes go { from { transform: translateX(0) } to { transform: translateX(600px) } } </style> <body> <div></div> </body> ~~~ # 多组动画 ~~~ <style> div { width: 100px; height: 100px; background-color: pink; /*animation: go 2s ease 0s infinite alternate; 引用动画*/ animation: go 2s infinite; /*引用动画*/ /*animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;*/ /*动画名称是自己定义的 go google*/ /*infinite 无限循环*/ /*一般情况下，我们就用前2个 animation: go 2s*/ } /*@keyframes go {} 定义动画*/ @keyframes go { 0% { /*起始位置，等价于 form*/ transform: translate3d(0, 0, 0) ; } 25% { transform: translate3d(800px, 0, 0); } 50% { transform: translate3d(800px, 400px, 0); } 75% { transform: translate3d(0, 400px, 0); } 100% { transform: translate3d(0, 0, 0); /*100% 相当于结束位置 to*/ } } /* 动画结束之后会返回原来的位置！！！*/ </style> <div></div> ~~~ # 汽车翻转 ~~~ <style> img { /*animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;*/ animation: car 5s infinite; /*引用动画*/ } /*定义动画*/ @keyframes car { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1000px, 0, 0); } 51% { transform: translate3d(1000px, 0, 0) rotateY(180deg); /*如果多组变形都属于 tarnsform 我们用空格隔开就好了*/ } 99% { transform: translate3d(0, 0, 0) rotateY(180deg); /*如果多组变形都属于 tarnsform 我们用空格隔开就好了*/ } } </style> <img src="images/car.jpg" width="100" alt=""/> ~~~ # 无缝滚动图片, 冗余, 横着放 ![](https://img.kancloud.cn/29/e6/29e6e36f9b3685525ae8bc945b6fd1f2_833x165.png) ~~~ <style> * { margin: 0; padding:0; } ul { list-style: none; } nav { width: 882px; height: 86px; border: 1px solid pink; margin: 100px auto; overflow: hidden; } nav li { float: left; } nav ul { width: 200%; animation: moving 5s linear infinite; /*引用动画*/ /*linear 匀速动画*/ } /*定义动画*/ @keyframes moving { form { transform: translateX(0); } to { transform: translateX(-882px); } } nav:hover ul { /*鼠标经过nav 里面的ul 就暂停动画*/ animation-play-state:paused; /*鼠标经过暂停动画*/ } </style> <nav> <ul> <li><img src="images/nav1.jpg" alt=""/></li> <li><img src="images/nav2.jpg" alt=""/></li> <li><img src="images/nav3.jpg" alt=""/></li> <li><img src="images/nav4.jpg" alt=""/></li> <li><img src="images/nav5.jpg" alt=""/></li> <li><img src="images/nav6.jpg" alt=""/></li> <li><img src="images/nav7.jpg" alt=""/></li> <li><img src="images/nav1.jpg" alt=""/></li> <li><img src="images/nav2.jpg" alt=""/></li> <li><img src="images/nav3.jpg" alt=""/></li> <li><img src="images/nav4.jpg" alt=""/></li> <li><img src="images/nav5.jpg" alt=""/></li> <li><img src="images/nav6.jpg" alt=""/></li> <li><img src="images/nav7.jpg" alt=""/></li> </ul> </nav> ~~~