Open lulujianglab opened 6 years ago
我相信很多前端开发人员都有用CSS3写过动画的经历,甚至创建过一些比较复杂的2D或3D动画效果
在这篇文章,主要通过案例来介绍一些常见的CSS3的动画属性
先来看下常见的CSS3的动画属性都有哪些
.box { width: 200px; height: 200px; background-color: red; transform: translate(400px); transform: rotate(45deg); transform: scale(2); } .box:hover { transform: rotate(720deg) scale(2); } .....
<div class="box"></div>
.box { width: 200px; height: 200px; background-color: red; transition-property: all; transition-delay: 1s; transition-duration: 4s; transition-timing-function: linear; /*transition: all 4s 1s linear*/ } .box:hover { transform: rotate(720deg) scale(2); } ..... ```html <div class="box"></div>
.box { width: 200px; height: 200px; background-color: red; animation-name: box; animation-duration: 4s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: both; /*animation: box 4s 1s linear 1 both;*/ } @keyframes box { 0%{ width: 0; } 25%{ width: 200px; } 50%{ width: 400px; } 5%{ width: 600px; } 100%{ width: 800px; } } .box:hover { animation-play-state: paused; } .....
综合案例可以参考demo
我相信很多前端开发人员都有用CSS3写过动画的经历,甚至创建过一些比较复杂的2D或3D动画效果
在这篇文章,主要通过案例来介绍一些常见的CSS3的动画属性
先来看下常见的CSS3的动画属性都有哪些
转换transform
过渡transition
animation动画
综合案例可以参考demo