• 技术文章 >web前端 >前端问答

    css动画是由什么组成

    青灯夜游青灯夜游2021-11-18 17:53:01原创68

    css动画是由关键帧、动画属性和css属性三部分组成的。关键帧用于定义动画在不同阶段的状态;动画属性用于决定动画的播放时长,播放次数,以及用何种函数式去播放动画等;css属性用于指定css元素在不同关键帧下的状态。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css动画是由三部分组成,分别为关键帧(keyframes)、动画属性(properties)、css属性。

    1、关键帧

    使用@keyframes规则指定,可以用来定义CSS动画的一个周期的行为,可以创建简单的动画。

    动画与转换类似,因为它们都是随时间改变CSS属性的表示值。主要区别在于,当属性值更改时(例如,当悬停时属性值发生改变时),转换会隐式的触发,但在应用动画属性时会显式执行动画。因此,动画需要显示动画属性的显式值。这些值是在@keyframes规则中指定的动画关键帧定义的。因此,@keyframes规则里是由一组封装的CSS样式规则组成的,这些规则描述了属性值如何随时间变化。

    2、动画属性

    通过@keyframes创建了动画,就需要animation(动画)属性将动画应用于元素,并设置动画迭代的次数,是否在开始和结束值之间交替,以及动画是否应该运行或暂停。

    动画属性可以理解为播放器的相关功能,一个最基本的播放器应该具有:播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。

    animation:
    [animation-name] [animation-duration] // 动画的名称、持续时间
    [animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
    [animation-iteration-count] [animation-direction] // 播放次数、播放顺序
    [animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

    关键帧+动画属性的语法:

    /* 定义动画*/
    @keyframes 动画名称{
        /* 样式规则*/
    }
    
    /* 将它应用于元素 */
    .element {
        animation-name: 动画名称(在@keyframes中已经声明好的);
    
        /* 或使用动画简写属性*/
        animation: 动画名称 1s ...
    }

    在@keyframes规则的大括号里有什么?

    在大括号中,我们需要定义关键帧或航点,这些关键帧或航点指定在动画期间的特定点处正在动画化的属性的值。这允许我们控制动画序列中的中间步骤。例如,一个简单动画的@keyframe可以是这样:

    @keyframes change-bg-color {
        0% {
            background-color: red;
        }
        50% {
            background-color: blue;
        }
        100%{
        background-color: red;
        }
    }
    .demo{
     -webkit-animation:change-bg-color 5s infinite;
             animation: change-bg-color 5s infinite;
    }

    运行效果:

    '0%'、‘50%’、'100%'都是关键帧选择器,每个选择器定义一个关键帧规则。关键帧规则的关键帧声明块由属性和值组成。

    上述动画类似于简单的过渡效果:背景颜色从动画开头的一个值(0%)开始变化,在中间达到一个值(50%),在动画结束时达到另一个值(100%)。“0%”、”50%”和“100%”关键帧选择器定义了希望动画属性更改值的航点或百分点。我们也可以使用选择器关键字 from,to而不是分别使用0%和100%,它们是等效的。

    @keyframes change-bg-color {
       from{
            background-color: red;
        }
        50% {
            background-color: blue;
        }
        to{
        background-color: red;
        }
    }

    关键帧选择器由一个或多个以逗号分隔的百分比值或from和to关键字组成。请注意,百分比单位说明符必须用于百分比值。因此,'0'是无效的关键帧选择器。

    以下是具有关键帧选择器的动画示例,其中包括多个以逗号分隔的百分比值和/或关键字关键帧选择器from和to。

    @keyframes bouncing {
        0%, 50%, 100% { /* 或者 from, 50%, to */
            top: 0;
        }
        25%, 75% {
            top: 100px;
        }
    }

    上面的@keyframes规则定义:元素的顶部偏移量在开始时,中途和动画结束时将等于零,并且它将四分之一和四分之三路径时等于100px; 这意味着元素在动画循环中上下移动了好几次。

    (学习视频分享:css视频教程

    以上就是css动画是由什么组成的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 动画
    上一篇:css modules是什么意思 下一篇:jquery怎么实现取反方法
    php中文网线上培训班

    相关文章推荐

    • 如何用 jQuery 为段落元素设置动画• 利用CSS3创建实用的加载动画效果(两种)• 利用css制作有趣的文字摆动动画特效• 一步一步教你使用CSS制作文字实现逐帧动画(附代码)• 中秋献礼,分享一个CSS日地月公转动画效果!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网