CSS3-animation动画

css中可以实现动画的两种方式：

1.animation自定义动画

先来看看animation的实现过程：

        1.使用@keyframes实现， 可以使用%来实现动画的过度效果，0%代表开始，100%代表结束，

@keyframes myb{
      0%{
        transform: scale(0.88);

      }
      50%{
        transform: scale(100%);
      }
      100%{
        transform: scale(0.88);
      }
    }

        2.可是自定义动画的效果animation下面的参数

                           名字   动画持续时间 执行速度（后续有）开始时间 循环次数         播放方向 

timing-function值 

 

 也可以使用from和to关键词来实现

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

 上面的实现效果：

看看实现效果实现代码：

div{
      width: 100px;
      height: 40px;
      background-color: red;
      border-radius: 25px;
      text-align: center;
      padding-top: 15px;
      animation: myb 1s linear infinite;

    }
    @keyframes myb{
      0%{
        transform: scale(0.88);

      }
      50%{
        transform: scale(100%);
      }
      100%{
        transform: scale(0.88);
      }
    }
   

鼠标事件

div{
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    /* 鼠标放上去变色 */
    div:hover{
      background-color: aqua;
    }

效果: