码迷,mamicode.com
首页 > Web开发 > 详细

css 动画 transition和animation

时间:2020-04-06 15:48:57      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:delay   mode   url   www   支持   foo   ansi   range   blog   

本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

1. transition基本用法:

  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }
      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s;  //如果不使用 transition 鼠标移到img 上面时是马上变化的,加上这个属性,变化就会持续一秒的过程
      }
      img:hover {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <img src="./o_200404110308weixin_20191025171935.jpg"  />
  </body>
</html>

 

 我们还可以指定 height 或者 width 等属性的变化

      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s height;
      }

 

 这种写法表示只有 img 的height 有持续1s 的过度属性,如果想高度变化在变化宽度,可以指定delay参数

      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s height, 1s 1s width;
      }

  transiton 的状态变化速度默认不是匀速的,而是逐渐放慢的,这叫做 ease

      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
        transition: 1s height, 1s 1s width ease;
      }

  除了可以取值ease 以外,还有其他模式

1. linear : 匀速
2.ease-in: 从慢到快
3.ease-out: 从快到慢
4.cubic-bezier函数:自定义速度模式

  cubic-bezier可以用工具网址:https://cubic-bezier.com/#.17,.67,.83,.67 来定制

img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

  使用transition 的注意事项:

    1.目前各大浏览器都已经支持无前缀的 transition ,所以可以很安全的使用

    2.不是所有css 属性都支持 transition 

    3. transition 需要明确知道开始状态和结束状态的具体数值,也就是说如果开始或结束的设置是 height:auto,那么不会产生动画效果,类似的情况还有, display:none到 block background:url(foo,jpg)到url(bar.jpg)等等

 

transition 的局限:

    1. transiton 需要事件触发,所以没办法在网页加载时自动触发

    2.transition 是一次性的,不能重复发生,除非一再触发

    3.transition 只能有两个状态

 

2.Animation

  首先,css Anmiation 需要指定动画一个周期持续时间

      .donghua {
        animation: 1s rainbow;
      }

  上面的代码表设计,给.donghua 这个class 添加一个 动画,我们需要定义动画的rainbow 动画效果

      @keyframes rainbow {
        0% {
          background: red;
        }
        50% {
          background: orange;
        }
        100% {
          background: yellowgreen;
        }

  触发动画

    <div id="div1"></div>
    <button onclick="donghua()">点我</button>
    <script>
      let div1 = document.getElementById(‘div1‘)
      function donghua() {
        div1.classList.add(‘donghua‘)
      }
    </script>

  默认情况下,动画只能播放一次,加入 infinite 关键可以让动画无限播放

      .donghua {
        animation: 1s rainbow infinite;
      }

 也可以指定动画具体播放次数

      .donghua {
        animation: 1s rainbow 3;
      }

  动画结束以后,会立即从结束状态跳回起始状态。如果想让动画保持在结束状态可以使用

animation-fill-mode属性。

      .donghua {
        animation: 1s rainbow forwards;
      }

  animation-fill-mode 的其他值

1. none :默认值,回到动画没开始的状态
2.backwards : 让动画回到第一帧的状态
3.forwars : 结束状态

  有时,动画播放过程中突然停止,这时,默认跳回到动画开始时的状态,如果想要动画保持结束的位置,可以使用 animation-play-state属性

  

      .donghua {
        animation: 1s rainbow infinite;
        animation-play-state: paused;
      }
      .donghua:hover {
        animation-play-state: running;
      }

  

css 动画 transition和animation

标签:delay   mode   url   www   支持   foo   ansi   range   blog   

原文地址:https://www.cnblogs.com/SuperBrother/p/12642130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!