CSS动画

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>

View Code

关键帧动画

<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>

View Code

逐帧动画

<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>

View Code