CSS3动画

最新推荐文章于 2022-12-15 14:38:50 发布

TyrionJ

最新推荐文章于 2022-12-15 14:38:50 发布

阅读量354

点赞数

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

本文链接：https://blog.youkuaiyun.com/TyrionJ/article/details/78831816

版权

css 专栏收录该内容

10 篇文章

订阅专栏

前面就介绍了使用CSS3的transition属性实现一些属性过渡的动画效果。虽然tranition在一定的时间内可以实现元素的初始状态在指定的事件范围内过渡到最终状态，模拟一种过渡动画效果，但功能有限，通过CSS3animation属性可以像flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画效果。

1.动画简介

1.1 步骤

通过关键帧来声明一个动画
在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果

1.2 动画属性
animation属性可以通过@keyframes构建一些transition的动画效果，然后调用。

语法：

animation:ani-name || ani-duration || anni-timing-function || ani-delay　|| ani-iteration-count || ani-direction || ani-play-state || ani-fill-mode

8 son values

ani-name:主要指定一个关键帧动画的名字，这个动画必须对应一个@keyframes规则。CSS加载时会应用ani-name指定的动画，从而执行动画。
ani-duration:主要用来设置动画播放所需时间，一般以秒为单位。
ani-timing-function:: 主要用来设置动画的播放方式，与transition-timing-function类似
ani-delay:主要用来指定动画开始时间，一般以秒为单位
ani-iteration-count: 主要用来指定动画播放的循环次数
ani-direction:主要用来指定动画的播放方向
ani-play-state: 主要用来控制动画的播放状态
ani-fill-mode:主要用来设置动画的时间外属性

CSS3动画具有8个子属性，很多情况下都是分开写

animation-name: moveten;
animation-duration: 1s;
animation-timing-function: steps(10,end);
animation--iteration-count: infinite;
animation-direction: alternate;
animation-delay: 3s;
animation-fill-mode: backwards;

可以简写：子属性之间用空格分开

animation: moveten 1s steps(10,end) infinite alternate 3s backwards;

除了可以将动画子属性简写在一起之外，还可以将多个动画应用在一个元素之上。同时将多个动画应用在一个元素之上时，可以包括每个动画名称的分组，每个简写的分组以逗号分隔开。

animation: animation1 1s ease .5s backwards, animation2 2s ease 1s forwards;

2.关键帧@keyframes
CSS3 animation制作动画效果主要包括两部分，首先是用关键帧声明一个动画，其次是在animation调用@keyframes声明的动画。

2.1 @keyframes作用
transition制作一个简单的动画效果时，包括了元素的初始属性和最终属性，一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率，这獬豸都是一个中间值，如果要控制得更细一些，比如说要第一个时间执行什么动作，第二个时间执行什么动作，transition就很难实现，需要一个”关键帧“来控制，在CSS3中就是通过@keyframes属性来实现这些效果的。
2.2 @keyframes的语法

@keyframes开头，后面是”动画名称ani-name”加上”{…}”,花括号中姐姐就是不同时间段样式规则，有点像CSS的样式写法。
一个@keyframes中的样式规则是由多个百分比构成的，0%~100%，可以在这个规则中创建更多个百分比，分别给每个百分比中需要有动画效果的元素加上不同的属性，从而让元素达到一种不断变化的效果，比如说移动，改变颜色，位置，大小和形状等。
注意：from == 0%, to==100%，百分号不能省略。

@keyframes ani-name {
    from {
    /*css styles here*/
    }
    percentage{
    /*css styles here*/
    }
    to{
    /*css styles here*/
    }
}

@keyframes ani-name {
    0%{
    /*css styles here*/
    }
    percentage{
    /*css styles here*/
    }
    100%{
    /*css styles here*/
    }
}

2.3 demo here

CSS


    .content {
        height: 100px;
        width:100px;
        background: red;
        color:black;
        border: 1px solid blue;
    }
    @keyframes change {
        from {
            height: 100px;
            width:100px;
            background: red;
            color:black;
            border: 1px solid blue;
        }
        10% {
            height: 100px;
            width:100px;
            background: green;
            color:black;
            border: 1px solid blue;
        }
        20% {
            height: 100px;
            width:100px;
            background: white;
            color:black;
            border: 1px dashed blue;
        }
        to {
            height: 200px;
            width:200px;
            background: yellow;
            color:white;
            border: 4px dashed blue;
        }
    }
    .content:hover {
    animation: change 4s steps(4,end) infinite alternate 3s backwards ;
    }

HTML

<div class="wrapper">
    <div class="content">animation demo</div>
</div>

3.调用@keyframes声明的动画
@keyframes只是用来声明一个动画，如果不通过别的CSS属性调用这个动画，是无任何动画效果的。
CSS的animation类似transition属性它们都是随着时间改变元素的属性值。它们主要区别是transition需要触发一个事件（hover or click）才会随事件改变其CSS属性；而animation在不需要触发任何事件的情况下也可以显式随着时间变化改变元素CSS属性值，从而达到一种动画效果。

4.CSS3动画子属性详解

animation-name: none | IDENT[,none | DENT]*；
- IDENT：由@keyframes创建的动画名称
- none:为默认值，没有任何动画效果，其可以覆盖任何动画
animation-duration: time 设置动画播放事件，如果是负值则视为0
animation-timing-function: ease |ease-in-out|cubic-bezier 根据元素时间的推进来改变属性值的变换速率，类似于transition-timing-function
animation-delay:设置动画延迟播放事时间
animation-iteration-count: infinite | number 定义动画播放次数。其值通常为整数，也可以是带有小数的数字，默认为1,1意味着动画从开始到结束只播放一次。infinite动画倔强无限次播放。
animation-direction: normal | alternate
- normal: 动画每次循环都是向前播放
- alternative:偶数次向前播放。奇数次向后播放，如小球弹跳动画中，可以为落下的球提供关键帧,animation-direction为alternate来控制播放动画的每秒中反转它。
animation-play-state:running |pasued
- running默认值，主要作用类似于音乐播放器，通过running将暂停的动画重新播放，重新播放可能是从暂停位置开始播放
- pasued：将正在播放的动画停下来，暂停后元素的样式会回到最原始设置状态。
animation-fill-mode:none | forwards | backwards | both
- none:动画将预期进行和结束，在动画完成最后一帧时，动画会反转到初始帧处。
- forwards:动画在结束后继续应用到最后关键帧的位置
- backwards:会在向元素应用样式时迅速应用动画的初始帧
- both:元素动画同时具有forwards和backwards效果。