css 动画 transition和animation

更新时间:2023-04-07 09:57:15 阅读：评论：0

本文参考：

1. transition基本用法：

<!doctype html><html lang="en">  <head>    <meta chart="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" alt="" />  </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 的状态变化速度默认不是匀速的，而是逐渐放慢的，这叫做 ea

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

　　除了可以取值ea 以外，还有其他模式

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

　　cubic-bezier可以用工具网址：来定制

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')      }    </s目标管理的特点cript>

　　默认情况下，动画只能播放一次，加入 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: paud;      }      .donghua:hover {        animation-play-state: running;      }

本文发布于:2023-04-07 09:57:14，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/23a4c0febc4d39fafc6ef421785920f3.html

本文word下载地址：css 动画 transition和animation.doc

本文 PDF 下载地址：css 动画 transition和animation.pdf

上一篇：Laravel推荐使用的十个辅助函数

下一篇：返回列表

标签：动画状态结束属性

留言与评论（共有 0 条评论）