@keyframes的应用

一：@keyframes

1：@keyframes能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。
2：animation属性控制动画的外观：;
animation-name:设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。
animation-duration:1s设置动画所花费的时间
animation-fill-mode：指定了在动画结束时元素的样式；
animation-fill-mode:forwards;：会一直显示动画结束后的CSS， 注意注意注意注意：只显示100%时的@keyframes的样式！！！！！！！！！！！！！！
animation-iteration-count: 3;这个属性允许你控制动画循环的次数;
把animation-iteration-count属性改成 infinite，让动画一直执行；
可以同时设置好几个动画，实现背景的，实现具体图形的；
animation-timing-function:规定动画的速度曲线；指定时间内（animation-duration）从 A 运动到 B，那么animation-timing-function表述的就是车在运动中的加速和减速等过程。
animation-timing-function：ease（动画以低速开始，然后加快，在结束前变慢）
animation-timing-function：ease-out（动画以高速开始，以低速结束;）
animation-timing-function： ease-in（动画以低速开始，以高速结束）
animation-timing-function：linear（动画从头到尾的速度是相同的。）
animation-timing-function：cubic-bezier(x1，y1，x2，y2); （贝塞尔曲线）：
贝塞尔曲线：共有四点 p0,p1,p2,p3； p0（0,0）和p3（1,1）为起点和终点，是固定值，不用加；
p1(x1，y1)、p2(x2，y2)代表曲线从0到1经过的点，也就决定了动画的曲线速度；
若x1=y1 && x2=y2；则说明是匀速，此时的贝赛尔曲线 = linear；
0<x<1;0<y;

例1：利用@keyframes和animation实现动画的播放；（只能执行一次，且执行完恢复成原来的样子）

<style>
#rect {
    animation-name:rainbow;//动画的名称；
    animation-duration:4s;//动画播放完成的时间；
  }
  //动画0-100%之内可以随意设置；
  @keyframes rainbow{
    0%{ 	//动画开始时为蓝色
      background-color:blue;
    }
    50%{	//动画中间为绿色
      background-color:green;
    }
    100%{	//动画最后位黄色  
      background-color:yellow;
    }
  }
</style>
<div id="rect"></div>	//动画播放完后会消失

例2：使用 CSS 动画创建运动，通过改变动画的位置，实现动画在页面之间的跳动；

<style>
#rect {
  animation-name: rainbow;
  animation-duration: 4s;
  ///animation-iteration-count: infinite; //设置动画一直循环执行；
  ///animation-timing-function:ease;  设置动画在4s内变化的速度；
  ///animation-timing-function: cubic-bezier(0.25,0.25,0.75,0.75);  贝塞尔曲线
}

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px; 
    left:0px;
   	//opacity:0.1; 可以添加透明度，实现若隐若现的效果
   	//transform: scale(0.5); 可以改变动画某一个 % 时的大小;
  }
  50% {
    background-color: green;
    top: 50px;
    left:25px;
  }
  100% {
    background-color: yellow;
    top: 0px;
    left:-25px;
  }
}
</style>
<div id="rect"></div>

例3：使用贝塞尔曲线移动图形：

<style>
  .balls{
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;  //一直执行
  }
  #red {
    background: red;
    left: 27%;
    animation-timing-function: cubic-bezier(0,0,0.58,1);  //贝塞尔曲线
  }
  #blue {
    background: blue;
    left: 56%;
    animation-timing-function: ease-out;
  }
  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

二：:hover和@keyframes

可以实现点鼠标悬停在元素（按钮）上时，实现播放动画效果；

例1： 当鼠标放在按钮上时，执行一次0.5秒的动画就会恢复原来的背景颜色；

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
  }
  @keyframes background-color{
      100%{
        background-color:#4791d0;
      }
  }  
</style>
<button>注册</button>

例2：我们可以发现动画执行完后就会变为原来的样子，如何实现当鼠标悬停在按钮上时一直为#4791d0

animation-fill-mode指定了在动画结束时元素的样式；
animation-fill-mode:forwards;：会一直显示动画结束后的CSS；
注意注意注意注意：只显示100%时的@keyframes的样式！！！！！！！！！！！！！！

例1：当动画结束后，会一直显示动画最后的样式；

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    /* add your code below this line */
    animation-fill-mode: forwards;  /显示动画100%的样式
    /* add your code above this line */
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>注册</button>