CSS3动画属性有哪些

最新推荐文章于 2024-07-22 19:12:50 发布

chenqx182

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量544

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/chenqx182/article/details/104739583

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS动画属性
CSS动画分为2d动画和3d动画

过渡 transition：属性值（s）；特点：需要事件进行触发。

2D变形属性：transform

2d位移：transform:translate(参数1，参数2)

参数1：在X轴移动的距离。参数2：在Y轴移动的距离
参数的设置:如果是正值的情况下：往右往下负值：往左往上

.box{
            width:500px;
            height:400px;
            margin:100px auto;
            background:orange;
        }
        h2{
            width:100px;
            height:100px;
            background:blue;
            /* 过渡属性 */
            transition:1s;
        }
        /* h2进行位置的移动 */
        .box:hover h2{
            transform:translateX(200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

2d缩放：transform:scale(参数1，参数2); （0 - 0.999999 缩小大于1 放大）

参数1：X轴缩放的比例。参数2：Y轴缩放的比例
注：如果两个参数相同的情况下直接写一个。

  .box{
            width:500px;
            height:400px;
            background:orange;
            margin:50px auto;
        }
        h2{
            width:100px;
            height:100px;
            background:blue;
            transition:1s;
        }
        /* 交互 */
        .box:hover h2{
            transform:scaleY(2);
        }

2d旋转： transform:rotate(); 旋转的是一个度数 deg

默认情况下：绕着中心点进行转动

 .box{
            width:500px;
            height:400px;
            background:orange;
            margin:40px auto;
        }
        h2{
            width:50px;
            height:200px;
            background:blue;
            transition:1s;
        }
        .box:hover h2{
            transform:rotateX(60deg);
        }

2d倾斜：transform:skew(); deg

  .box{
            width:500px;
            height:400px;
            background:#ccc;
            margin:50px auto;
        }
        h2{
            width:200px;
            height:100px;
            background:red;
            /* 过渡属性 */
            transition:1s;
        }
        /* 鼠标滑过 */
        .box:hover h2{
            transform:skew(30deg,20deg);
        }

CSS3D

transform-style:preserve-3d 形成一个3D空间：( 让父元素形成3D，让其子元素在3D空间进行变化 )

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

3D功能函数
变形属性： transform:

3D的位移：
transform:translate(x,y,z);
translateX()、 translateY()、 translateZ()
3D的旋转：
transform:rotate();
rotateX()、 rotateY()、rotateZ() //默认情况效果类似
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

 .box{
            width:500px;
            height:400px;
            background:orange url(./images/1.jpg);
            background-size:100% 100%;
            margin:100px auto;
            /* 形成3D空间 */
            transform-style:preserve-3d;
            transform:rotateY(50deg);
        }
        h2{
            width:200px;
            height:200px;
            background:blue url(./images/2.jpg);
            background-size:100% 100%;
            transition:1s;
        }
        .box:hover h2{
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

3D缩放：
transform:scale3d(x,y,z);
scaleX()、 scaleY()、scaleZ()

动画： animation；特点：不需要事件进行触发。调用关键帧即可
常用的写法： animation:关键帧的名称动画运动的时间 linear(匀速) 动画延迟的时间

 animation-name   关键帧的名称
 animation-duration   动画的持续的时间
 animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
 animation-delay  动画的延迟
 animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)
 animation-direction  运动的方向
         属性值：
             - reverse：反方向运行 （ 让关键帧从后往前执行 ）
             - alternate：动画先正常运行再反方向运行，并持续交替运行
             - alternate-reverse：动画先反运行再正方向运行，并持续交替运行
 animation-play-state 
         属性值：
             paused暂停
             running运动

制定关键帧：

    @keyframes 关键帧的名称{
       选择符名{}
        0%{
            //开始状态
        }
        25%{
        }
        50%{
        }
        ......
        100%{
            //结束状态
        }
    }

animation 和@keyframes 自动循环动画代码如下

 .box{
            width:800px;
            height:500px;
            background:orange;
            margin:50px auto;
            position:relative;
        }
        h2{
            width:100px;
            height:100px;
            background:blue;
            position:absolute;
            left:0;top:0;
            /* 用animation 调用关键帧 */
            animation:h2Move 3s infinite;
        }
        /* 鼠标滑过动画暂定 */
        /* .box:hover h2{
            
            animation-play-state:paused;
        } */

        /* 制定关键帧 */
        @keyframes h2Move{
            0%{
                left:0;top:0;
            }
            25%{
                left:700px;top:0;
            }
            50%{
                left:700px;top:400px;
            }
            75%{
                left:0;top:400px;
            }
            100%{
                left:0;top:0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>