CSS3动画 -彩虹简单HTML便于理解动画效果以及关键帧

沐风清扬

已于 2023-05-23 19:54:56 修改

阅读量148

点赞数

分类专栏： css3 文章标签： css3 html css

于 2023-05-23 19:51:43 首次发布

本文链接：https://blog.csdn.net/m0_68711597/article/details/130833955

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果：

点击观看

属性名

说明

transition-delay

指定过渡开始之前的延迟时间

transition-duration

指定过渡的持续时间

transition-property

指定应用过渡的属性

transition-timing-function

指定过渡期间计算中间值的方式

transition

在一条声明中指定所有过渡细节的简写属性

属性值

说明

ease

指定慢速开始，然后变快，然后慢速结束的过渡效果，默认值

linear

指定以相同速度开始至结束的过渡效果

ease-in

指定以慢速开始的过渡效果

ease-out

指定以慢速结束的过渡效果

ease-in-out

指定以慢速开始，慢速结束的过渡效果

过渡

通过CSS3中过渡属性，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素

添加效果

可使用transition-timing-function 属性指定，其取值如下，使用过渡时，浏览器需要为每个样式属性计算初始值和最终值

之间的中间值

CSS3动画

CSS3动画本质上是增强的过渡。在如何从一种CSS3样式过渡到另一种样式的过渡中，可以具有更多选择和控制，以及

CSS3动画基于关键帧，动画的定义分两部分定义的

使用 @keyframes 规则创建一个动画，用于定义应用动画的属性

在样式声明时，使用 animation 及其相关属性调用关键帧以实现动画

@keyframes 关键帧组名{属性名

说明

animation-delay

指定动画开始之前的延迟时间

animation-direction

指定动画循环播放的时间是否反向播放过渡的持续时间

animation-duration

指定动画播放的持续时间

animation-iteration-count

指定动画的播放次数，取值infinite或数值

animation-name

指定动画名称

animation-timing-function

指定动画期间计算中间值的方式。确定动画播放速度的变化

属性值

说明

translate(<长度值或百分数值>)

指定在水平和垂直两个方向上平移元素

translateX(<长度值或百分数值>)

指定在水平方向上平移元素

translateY(<长度值或百分数值>)

指定在垂直方向上平移元素

scale(<数值>)

指定在水平和垂直两个方向上缩放元素

scaleX(<数值>)

指定在水平方向上缩放元素

scaleY(<数值>)

指定在垂直方向上缩放元素

0%{ 样式属性值 }

...

50%{ 样式属性值 }

...

100%{ 样式属性值 }

}

from 起始 = 0%，to结束=100%

animation：关键帧组名持续时间动画速度延迟时间播放次数

<!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>

        *{

        margin: 0;

        padding: 0;

        }

        .box div{

            height: 20px;

            width: 10px;

            animation-name: ok;

            animation-timing-function: linear;

            animation-duration: 3s;

            animation-iteration-count: infinite;

           

        }

        .red{

            animation-delay: 1000ms;

            background-color: red;

        }

        .orange{

            animation-delay: 800ms;

            background-color: orange;

        }

        .yellow{

            animation-delay: 600ms;

            background-color: yellow;

        }

        .green{

            animation-delay: 400ms;

            background-color: green;

        }

        .blue{

            animation-delay: 200ms;

            background-color:blue;



        }

        .purple{

            animation-delay: 100ms;

            background-color:purple;

        }

        .black{

            animation-delay: 5 0ms;

            background-color: black

        }

        @keyframes ok

        {

            50%{

                width: 500px;

                background-color: black;

            }

           

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="red"></div>

        <div class="orange"></div>

        <div class="yellow"></div>

        <div class="green"></div>

        <div class="blue"></div>

        <div class="purple"></div>

        <div class="black"></div>

    </div>

</body>

</html>