动画、过渡、转换

最新推荐文章于 2023-09-06 07:16:57 发布

Kedaya_7017

最新推荐文章于 2023-09-06 07:16:57 发布

阅读量142

点赞数 1

本文链接：https://blog.csdn.net/Kedaya_7017/article/details/119870056

版权

1.动画

动画使元素逐渐从一种样式变为另一种样式。
可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

1.1实现步骤

    1.1.1 @keyframes 动画名{
            from {
              // 开始帧
            }
            to {
              // 结束帧
            }
          }

     1.1.2@keyframes 动画名{
            0% {
              // 开始帧
            }
            20% {

            }
            ...
            100% {
              // 结束帧
            }
          }

1.2属性规则

animation-name: move;    动画名

animation-duration: 2s;                                   持续时间（默认值是 0s）

animation-timing-function: linear;                  时间曲线函数（自由落体，贝塞尔曲线）

animation-fill-mode:forwards;                         填充模式，动画结束后保留哪一帧规则
none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

animation-iteration-count: 2;                            动画应运行的次数

animation-direction: alternate-reverse;    动画执行的方向 from->to , to->from
normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

animation-play-state: paused;                        动画状态

animation-delay: 1s;                                         延迟时间

animation: move 2s 1s 2 linear;                      动画的速写形式

1.3呼吸灯

<style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            box-sizing: border-box;
        }
        .content{
            width: 400px;
            height: 600px;
            background-color: #FFFF99;
            margin: 0 auto;
        }
        .content >.box{
            border: 1px solid #cccc21;
            height: 400px;
            padding: 40px;
            animation-name: outer;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

        }
        .content >.box >.outer{
            border: 4px solid #CCCCFF;
            height: 100%;
            padding: 20px;
            animation-name: inner;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .content >.box >.outer >.inner{
            border: 6px solid #a6a6f7;
            height: 100%;
        }
        .circle{
            border-radius: 50%;
        }
 @keyframes outer{
    25%{
        padding: 30px;
    }
    50%{
        padding: 40px;
    }
    
 }
 @keyframes inner{
    25%{
        padding: 30px;
    }
    50%{
        padding: 20px;
    }
    75%{
        padding: 30px;
    }
    100%{
        padding: 20px;
    }
}
    </style>
</head>

<body>
    <div class="content">
        <div class="box">
            <div class="outer circle">
                <div class="inner circle">

                </div>
            </div>
        </div>
    </div>

2.过渡

过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）

2.1实现步骤

明确要添加效果的 CSS 属性
效果的持续时间

2.2属性规则

transition-timing-function 属性规定过渡效果的速度曲线。

transition-delay 属性规定过渡效果的延迟（以秒计）。

transition-property规定过渡效果所针对的 CSS 属性的名称。

transition-duration规定过渡效果要持续多少秒或毫秒。

transition（简写属性）: property duration timing-function delay;

3.转换

translate() 方法

Translate

translate(20px 100px(向右向下)) 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

rotate() 方法

Rotate

rotate(20deg( 顺时针20°/-20deg为逆时针)) 方法根据给定的角度顺时针或逆时针旋转元素。

scale() 方法

Scale

scale(2,3(增大为其原始宽度的两倍和其原始高度的三倍)) 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

Kedaya_7017

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画、过渡、转换

1.动画动画使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。1.1实现步骤 1.1.1 @keyframes 动画名{ from { // 开始帧 } to { // 结束帧 } } 1...
复制链接

扫一扫