过渡

transition过渡

css属性，在一定时间内，从一个值变化到另外一个值

transition-property过渡的属性

transition-duration过渡的时间

transition-property: width, background-color, color,height;
    transition-duration: 1000ms;
    /* 缩写方式 */
    transition: all linear 1000ms;

可以过渡的属性：颜色，尺寸，透明度

尺寸过渡的起始值与结束值不能给auto

• 指向图片过渡其他图片

  div {
      height: 129px;
      width: 229px;
      transition: all linear 1000ms;
      background-image: url("../dm_pic03.jpg");
  }
  div:hover {
      background-image: url("../dm_pic04.jpg");
  }

• 图片添加过渡阴影

  .yinyin:hover {
      box-shadow: 0px 0px 5px 5px red;
      transition: all linear 1000ms;
  }

• 左右过渡切换

  先添加两张图片，并让其平行显示

  section{height: 129px;
  width: 229px;
  display: flex;
  overflow: hidden;
  }
  section:hover>img:nth-child(1){
      margin-left: -100%;
  }
  section>img{
      transition: all linear 1000ms;
  }

• linear匀速过渡

   /* linear匀速过渡 */
      transition-timing-function: linear;
      /* 由慢到快 */
      transition-timing-function: ease-in;
      /* 由快到慢 */
      transition-timing-function: ease-out;
      /* 由慢到快，再到慢 */
      transition-timing-function: ease-in-out;

   

• @keyframes 动画定义

  @keyframes scroll {
      from {left: 100px;border-radius: 0;}
      20% {left: 100px;border-radius: 50px;}
      50% {left: 500px;border-radius: 50px;}
      70% {left: 100px;border-radius: 50px;}}

• 第一步定义动画

  书写格式：@keyframes 动画名称（可自定义）{动画效果}

  动画效果：百分率{声明块}（注：百分率是声明块动画的时间）

  第一条是动画的起始效果。

  最后一条是动画的结束效果。

  如果起始效果和结束效果相同，可以省略结束效果的代码

   

• 引用动画

  书写格式：animation:动画名称 动画时间 动画播放次数

• infinite 无限循环

  div:hover>img{animation: scroll 10s infinite;}

  直接到你需要展示动画的元素

• animated

  此标签可直接赋值class然后引用动画

标签：动画,linear,1000ms,transition,过渡,left
来源： https://www.cnblogs.com/zy950203/p/14940174.html