CSS的过渡、变形和动画

最新推荐文章于 2024-08-08 19:32:21 发布

Yeahyeahy

最新推荐文章于 2024-08-08 19:32:21 发布

阅读量653

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_48268485/article/details/125437554

版权

一、transition过渡

1.property过渡属性

设置应应用过渡效果的CSS 属性。

2.duration 过渡耗时

设置过渡动画完成所需的时间长度。默认情况下，该值为0，表示不会出现动画。

3.timing-function速度曲线

设置如何计算受过渡效果影响的CSS 属性的中间值。

4.delay等待时间

指定当属性值发生变化时，在启动属性的过渡效果transition-delay之前要等待的持续时间。

<head>
<style>
        /* trasition 案例 */
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            transition: all 3s;}
        
        @keyframes do {
            from {
                width: 0;
            }
            to {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div class="one">123</div>
</body>

注意：property 和 duration 这两个属性是必写项，property 用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。默认值为 all 也就是所有的元素都应用过渡效果。

二、transform 变形

1.rotate旋转

rotate（360deg)，旋转360度。

2.scale放大缩小

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

3.translate位移

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

<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>
        /* 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%);
        }      
    </style>
</head>
<body>
    <div class="one">123</div>  
</body>

三、animation 动画

1.name动画名称

指定一个或多个 at 规则的名称，该规则描述要应用于元素的一个或多个动画。

2.duration过渡耗时

设置动画完成一个周期所需的时间长度。

3.timing-function速度曲线

设置动画在每个周期的持续时间内如何进行。

4.delay等待时间

指定在开始执行动画之前从将动画应用到元素所等待的时间量。动画可以稍后开始，从其开始立即开始，或者在动画的中途立即开始。。

5.iteration-count循环次数

设置动画序列在停止之前应播放的次数。

6.direction是否反向播放

设置动画是否应该向前、向后或在向前和向后播放序列之间来回交替播放。

7. fill-mode动画停止方向

设置 CSS 动画在执行前后如何将样式应用于其目标。

8.animation-play-state 暂停动画

设置动画是正在运行还是暂停。

<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>
        /* 动画案例 */
 .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>     
</body>