CSS中的动画与过渡

最新推荐文章于 2024-06-01 14:57:43 发布

weixin_45987479

最新推荐文章于 2024-06-01 14:57:43 发布

阅读量299

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45987479/article/details/125433934

版权

一.CSS有如下三个属性

（1）CSS的动画属性

（2）CSS过渡属性

（3）vue过渡和动画

二、transition ， animation的区别

transition 只能声明元素变化从开始到结束之间的变化关系。而 animation 则是可以自由的定义一段动画在元素上的开始和结束。而且你能通过animation-iteration-count来设置动画的次数；通过过渡transition属性，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果，要实现这一点，必须实现一项内容，即指定效果的持续时间。

transition: 强调是单一属性的动画效果,从开始到结束整个过程,中间不会发生动画的转折animation：强调的是多种动画属性的结合，能够有效的排列动画执行时间的某时做某事，从开始到结束的过程可以是简单，也可以是复杂。算是 transition 的加强版

注：不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

下面对css动画与过渡进行演示

代码分享

<!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>
        /* trasition 案例 */
        /* div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transition: all 3s;
        } */

        /* @keyframes do {
            from {
                width: 0;
            }

            to {
                width: 200px;
            }
        } */

        /* trasition 案例 */
        /* div:hover {
            width: 400px;
            height: 300px;
            background-color: pink;
        } */

        /* transform  案例 */
        /* 左手法则，手背朝着自己，大拇指的朝向为我们的正值，握拳旋转方向即为旋转正值方向 */
        /* .one {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 100px auto;
            transition: all 1s;
        }

        div {
            background-color: red;
            height: 100px;
        }

        .one:hover {
            transform: rotateZ(360deg);
            transform: scaleY(.5);
            transform: translate(50%);
        } */

        /* 动画案例 */
        .one {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            animation: move 3s infinite;
        }

        /* 动画声明块 */
        @keyframes move {
            0% {
                transform: translate(0px, 0px);
            }

            25% {
                transform: translate(300px, 0px);

            }

            75% {
                transform: translate(300px, 300px);

            }

            100% {
                transform: translate(0px, 300px);

            }
        }
    </style>
</head>

<body>
    <div class="one">123</div>
    <!-- transition 过渡 -->
    <!-- 
        property duration timing-function delay 
        过渡属性  过渡耗时    速度曲线     等待时间
        property 和 duration 这两个属性是必写项
    -->



    <!-- transform 变形 -->
    <!-- rotate  scale  translate  
         旋转   放大缩小    位移

         scale 第一个值控制我们X轴方向的大小，即宽度，第二个值控制我们y轴方向的大小，即高度\
         特性：放大和缩小的时候不会影响到其他元素的布局

         translate
         当该属性的值为百分比的时候，它的参照物是该元素自身。即移动距离是自身宽度或者高度的相应百分比。
         可以配合绝对定位进行 块级元素的水平垂直居中
    -->

    <!-- animation 动画 -->
    <!-- 
        animation: name  duration timing-function delay iteration-count direction   fill-mode;  复合型写法
                  动画名称 过渡耗时  速度曲线   等待时间   循环次数      是否反向播放  动画停止方向
    -->
    <!-- animation-play-state  暂停动画 -->

</body>

</html>