【CSS3学习笔记】20：动画效果

最新推荐文章于 2022-06-03 15:26:32 发布

大桔骑士v

最新推荐文章于 2022-06-03 15:26:32 发布

阅读量706

点赞数

分类专栏： CSS 文章标签： css3 动画 html5

本文链接：https://blog.csdn.net/SHU15121856/article/details/77784338

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

通过CSS3动画效果可以像Flash关键帧那样控制动画，比上节学的过渡效果更灵活。
[1]总的animation属性
用于实现动画，流程：①先创建一个关键帧声明的动画 ②通过animation绑定声明的动画
这里写图片描述
即用@keyframes(关键帧属性)声明一个动画，然后再通过animation调用。

@keyframes name{
    /*...*/
}

[2]关键帧@keyframes

@keyframes lzh{
    0%{
        background-color: white;
        margin-left: 0px;
    }
    50%{
        background-color: yellow;
        margin-left: 100px;
    }
    100%{
        background-color: green;
        margin-left: 300px;
    }
}

这里百分之多少即相当于在那个点设置关键帧，还可以用from{…}to{…}的写法，相当于从0%到100%。

[3]用animation-name绑定动画名称

animation-name: lzh;

[4]animation-duration设置动画执行时间

animation-duration: 1s;

到这里就有效果了：
这里写图片描述

[5]animation-timing-function设置缓动
这里写图片描述

[6]animation-delay设置延迟时间

animation-delay: .5s;

[7]animation-iteration-count设置循环次数

animation-iteration-count: 3;

如果要设置无限次，值写infinite。

[8]animation-direction播放方向是否交替
normal表示每次只向前。

animation-direction: alternate;

alternate表示一次向前，一次向后。到这的效果：
这里写图片描述

[9]animation-play-state设置停止播放
当这个属性的值为paused时，动画就会停止播放，一般通过动态设置，如果直接设置那么动画一开始就不会播放了。

[10]animation-fill-mode设置结束返回
none按预期进行和结束，forwards结束后停至最后关键帧，backforwards结束后返回起始关键帧，both做自动判断(一般用于设置了交替的动画)。

animation-fill-mode: forwards;

[11]简写形式顺序

animation: name duration timing-function delay iteration-count direction;

[12]浏览器兼容性前缀
对于animation属性，Opera浏览器在这个属性上参与了-webkit-，所以没有-o-前缀。
对于@keyframes也需要加上前缀：

@-webkit-keyframes name{...}
@-moz-keyframes name{...}
@-o-keyframes name{...}
@-ms-keyframes name{...}
@keyframes name{...}

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>CSS3过渡效果</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="id1">我是HTML</div>
</html>

@charset "utf-8";
body{
    margin: 100px;
}

#id1{
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid green; 
    animation-name: lzh;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: .5s;
    animation-iteration-count: 3;
    animation-direction: alternate;
    /*animation-play-state: paused;*/
    animation-fill-mode: forwards;
}

@-webkit-keyframes lzh{
    0%{
        background-color: white;
        margin-left: 0px;
    }
    50%{
        background-color: yellow;
        margin-left: 100px;
    }
    100%{
        background-color: green;
        margin-left: 300px;
    }
}