「前端」CSS 制作动画常用技巧

最新推荐文章于 2022-07-12 22:11:15 发布

VIP文章 Jack_WJQ

最新推荐文章于 2022-07-12 22:11:15 发布

阅读量442

点赞数 4

分类专栏： # CSS学习记录文章标签： css3 css html5 html

本文链接：https://blog.csdn.net/qq_26377547/article/details/104792881

版权

transition

CSS 中有一个transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果：

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN

<!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>
      .box {
    
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #000;
        border-radius: 4px;
        /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
        transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
      }
      .box:hover {
    
        width: 400px;
        color: #000;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="box">鼠标悬浮查看效果</div>
    </div>
  </body>
</html>

动画效果点击此处查看

体验完了，现在来具体讲一下用法：

transition: transition-property | transition-duration |
  transition-timing-function | transition-delay;

这样写你们估计看不懂，我们一条一条来拆解：

transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */
transition-duration: 1s; /* 设定过渡动画的时长 */
transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */
transition-delay: 0.2s; /* 设定触发动画的延迟 */

而transition属性就是由上面的 4 条 CSS 属性组合而成。

第一第二个属性是必须项，用于指定侦听需要添加过渡动画的属性以及指定动画时长。

第三第四个属性为可选项，用于设定过渡动画的效果和延迟。

transition-timing-function的可选值详见

最低0.47元/天解锁文章

Jack_WJQ

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
「前端」CSS 制作动画常用技巧

transitionCSS 中有一个transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果：transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN&lt...
复制链接

扫一扫