css3 动画

最新推荐文章于 2022-12-15 14:38:50 发布

saturday-yh

最新推荐文章于 2022-12-15 14:38:50 发布

阅读量123

点赞数

分类专栏： css 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_42092177/article/details/112319348

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文深入探讨了CSS中的过渡（transition）和动画（animation）特性，通过实例展示了如何改变元素的大小、颜色以及创建复杂的动画效果。讲解了关键帧（keyframes）的使用，包括从简化的语法到高级技巧如steps函数的应用，以及如何控制动画的暂停与继续。此外，还提到了浏览器兼容性和实际应用中的注意事项。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            height: 15px;
            width: 15px;
        }

        img:hover {
            height: 450px;
            width: 450px;
        }

        /* img {
            transition-property: height;
            transition-duration: 1s;
            transition-delay: 1s;
            transition-timing-function: ease;
        } */
        /* 等同于 */
        img {
            /* transition: 1s height, 1s 1s width; */
            /* transition: 1s height cubic-bezier(.83, .97, .05, 1.44); */
            transition: 1s 1s height ease;
        }

        div {
            width: 100px;
            height: 100px;
        }


        /* div:hover {
            animation-name: rainbow;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-fill-mode: forwards;
            animation-direction: normal;(alternate、reverse、alternate-reverse)
            animation-iteration-count: 3;
        } */
        /* animation-fill-mode还可以使用下列值
        （1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。 */
        /* 等同于 */
        div:hover {
            animation: 1s 1s rainbow linear 3 forwards normal;
        }

        @keyframes rainbow {
            0% {
                background: #c00;
            }

            50% {
                background: orange;
            }

            100% {
                background: yellowgreen;
            }

        }
    </style>
</head>

<body>
    <div></div>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi04.c.aliimg.com%2Fimg%2Fibank%2F2013%2F211%2F016%2F791610112_758613609.jpg&refer=http%3A%2F%2Fi04.c.aliimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633674283&t=cf512a2dedee2709f3c890d6df52983c"
        alt="">
</body>

</html>

keyframes关键字用来定义动画的各个状态，它的写法相当自由。


@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

0%可以用from代表，100%可以用to代表，因此上面的代码等同于下面的形式。


@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

如果省略某个状态，浏览器会自动推算中间状态，所以下面都是合法的写法。


@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至，可以把多个状态写在一行。


@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。


div:hover {
  animation: 1s rainbow infinite steps(10);
}

这里有一个非常神奇的例子，可以看到steps函数的用处。

animation-play-state

有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。

上面动画中，如果鼠标移走，色块立刻回到动画开始状态。

如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。


div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

上面的代码指定，没有鼠标没有悬停时，动画状态是暂停；一旦悬停，动画状态改为继续播放。效果如下。

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

也就是说，实际运用中，代码必须写成下面的样子。


div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

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

saturday-yh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 动画

npm 安装 npm install print-js --savenpm安装时将库导入项目 import print from 'print-js'下面主要介绍一下我们要用的打印方法printJS();printJS()将接受一个对象作为参数，下面表格的参数则为该对象的属性,通过控制属性值来控制打印;参数默认值说明printable: null 文档来源：pdf或图像的url，html元素的id或json数据的对象type: PDF 可打印类型。可用的打印选项包括：pdf，ht.
复制链接

扫一扫

专栏目录