CSS3--动画

2024-01-07 17:13:58

动画的原理：

1.视觉暂留作用

2.画面逐渐变化

动画的作用：

1.愉悦感

2.引起注意

3.对一些操作进行反馈

4.掩饰

CSS中动画的类型：

1.transition补间动画

位置--平移(left/right/margin/transition)
方位--旋转(transform)
大小--缩放(transform)
透明度(opacity)
其他--线性变换(transform)

transition:

transition-delay 指定何时将开始切换效果，以秒为单位（S）或毫秒（ms）
transition-duration 规定完成过渡效果需要花费的时间（以秒或毫秒计）
transition-property 指定CSS属性的名称转换效果，通常会出现在当用户将鼠标悬停在一个元素上时，始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果
transition-timing-function 指定切换效果的速度，此属性允许一个过渡效果，以改变其持续时间的速度；transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
可以同时支持多个属性变动
定义动画进展和时间的关系：

示例：

 .container {
            width: 100px;
            height: 100px;
            background: red;
            transition: all 1s;
            /* transition-timing-function: ease-in-out; */
            transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435);
            /* transition-delay: 1s; */
            /*
            
            */
        }
        
        .container:hover {
            width: 800px;
            background: green;
        }

 <div class="container"></div>

2.keyframe关键帧动画

相当于多个补间动画

与元素状态的变化无关

定义更加灵活

animation：

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期（用法与transition-timing-function类似）
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数；取值为n，也就是具体多少次或者infinite也就是无限次
animation-direction 指定是否应该轮流反向播放动画；取值：normal（正常，默认值）/reverse（动画反向播放）/alternate(动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放)/alternate-reverse(动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放)/initial(设置该属性为它的默认值)/inherit(从父元素继承该属性)
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state 指定动画是否正在运行或已暂停；取值：paused|running

示例：

.container {
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s linear;
            /* animation-direction: reverse; */
            /* animation-fill-mode: forwards; */
            animation-iteration-count: infinite;
            /* animation-play-state: paused; */
        }
        
        @keyframes run {
            0% {
                width: 100px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 100px;
            }
        }

 <div class="container"></div>

3.逐帧动画

逐帧动画其实是属于关键帧动画的一个特殊的用法

特点：

适用于无法补间计算的动画
资源较大
使用steps()

注意：

适用于动画的面积比较小

动画本身的时长不是太大

示例：

.container {
            width: 100px;
            height: 100px;
            margin: 200px;
            /* border: 1px solid red; */
            background: url(./animal.png) no-repeat;
            animation: run 1s infinite;
             /*steps(n)，指定关键帧之间有几个画面*/
            animation-timing-function: steps(1);
        }
        
        @keyframes run {
            0% {
                background-position: 0 0;
            }
            12.5% {
                background-position: -100px 0;
            }
            25% {
                background-position: -200px 0;
            }
            37.5% {
                background-position: -300px 0;
            }
            50% {
                background-position: 0 -100px;
            }
            62.5% {
                background-position: -100px -100px;
            }
            75% {
                background-position: -200px -100px;
            }
            87.5% {
                background-position: -300px -100px;
            }
            100% {
                background-position: 0 0;
            }
        }

 <div class="container"></div>

原图：

码农公寓

动画的原理：

动画的作用：

CSS中动画的类型：

相关文章