CS动画
原理
视觉暂留
画面逐渐变化
作用
用户体验好
引起注意
CSS中的动画类型
transition补间动画
位置-平移
left/right/margin/transform
方位
transform
透明度
opacity
keyframe关键帧动画
相当于多个补间动画
与元素状态的变化无关
逐帧动画
适用于无法补间计算的动画
资源较大
使用steps()
补间动画
<style type="text/css"> .container{ width: 50px; height: 50px; background-color: red; transition: all 1s ease-in; } .container:hover{ width: 200px; } </style> <body> <div class="container"></div>
关键帧动画
<style type="text/css"> .container{ width: 50px; height: 50px; background-color: red; animation: run 2s ease-in infinite; } @keyframes run{ 0%{ width: 50px; } 50%{ width: 100px; } 100%{ width: 50px; } } </style> <div class="container"></div>
逐帧动画
<style type="text/css"> .container{ width: 106px; height: 110px; background-color: red; background-image: url(a.jpg); background-size: 480px 166px; background-position: -25px -32px;; animation: run 1s linear infinite; animation-timing-function: steps(1); } @keyframes run{ 0{ width: 106px; background-position: -25px -32px; } 10%{ width: 82px; background-position: -130px -32px; } 20%{ width: 98px; background-position: -212px -32px; } 30%{ width: 67px; background-position: -309px -32px; } 40%{ width: 72px; background-position: -392px -32px; } 100%{ width: 106px; background-position: -25px -32px; } } </style> <div class="container"></div>
