css3动画

最新推荐文章于 2024-07-05 10:59:59 发布

JJ_Smilewang

最新推荐文章于 2024-07-05 10:59:59 发布

阅读量357

点赞数 2

分类专栏： html5和CSS3提高文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124127667

版权

html5和CSS3提高专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动画（animation）一样是CSS3中具有颠覆性的特征之一，可通过设置多个关键帧来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较我们昨天介绍的过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1. 动画的制作步骤

制作动画一共有两步：
第一步：先定义动画，设置关键帧
第二步：再使用（调用）动画

1.1 用keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {
    0%{
         width:100px;
    } 
    100%{
         width:200px;
    }
}
上面的代码就是一个定义动画，设置关键帧的简单例子，一共设置了两个关键帧。

动画序列：

①0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

②在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
③动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。比如：
@keyframes 动画名称 {
    0%{
         transform:translate(0,0);
    } 
    25%{
         transform:translate(800px,0);
    } 
    50%{
         transform:translate(800px,500px);
    } 
    75%{
         transform:translate(0,500px);
    } 
    100%{
         transform:translate(0,0);
    }
}
④用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

1.2 元素使用动画（调用关键帧）

div {
   width: 200px;
   height: 200px;
   background-color: aqua;
   margin: 100px auto;
   /* 调用动画 */
    animation-name: 动画名称;  /* 名称必须和@keyframes设置的名字一致 */
   animation-duration: 持续时间;
 }
使用动画，需要借助animation相关属性，上面例子使用的animation-name、animation-duration属性，是调用动画必不可少的两个属性（必写的）。

2. 动画常用属性

①@keyframs 用来规定动画；

②animation 用于所有动画属性的简写属性

③animation-name 指的是由@keyframes创建的动画名称（必须的）

④animation-duration 指的是动画完成一个周期所需要花费的时间，单位为秒（必须的）

⑤animation-timing-function 指的是动画的速度曲线（l默认是ease)

⑥animation-delay 表示动画何时开始（延迟的时间），默认是0

⑦animation-iteration-count 表示动画的播放次数，默认值为1，特殊值为infinite(无限循环)，也可以是其他具体播放次数，那么直接写上数字即可，不要加单位

⑧animation-direction 表示动画是否在下一周期逆向播放，默认是“normal”，“alternate”表示逆播放。

⑨animation-play-state 表示鼠标移入动画的状态，paused表示鼠标移入，动画暂停，默认值为running

⑩animation- fill-mode 表示动画结束后状态，默认值是backwards ，会返回原来的位置；forward 表示会停在结束的位置

3. 动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

3.1 语法：

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

具体例子：
animation: move 5s linear 2s infinite alternate forward;

3.2 注意点

①简写属性里面不包含 animation-play-state
②暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
③想要动画走回来，而不是直接跳回来：animation-direction ：alternate
④盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

4. 总结

制作基本的动画，其实不难，只要按照①先定义动画，设置关键帧；②再使用（调用）动画，这两步来制作即可，但是需要注意的是，在制作前，首先要先考虑好动画实现的逻辑，即到底需要几个关键帧，以及每个关键帧里面的css样式如何，只要考虑清楚这个，实现动画就不是难事了。

比如，要想让一个盒子实现从左上走到右上，再到右下，然后到左下，最后回到起点位置，那么很明显这里需要5个关键帧，然后因为是盒子进行移动，所以使用translate属性来改变盒子具体的位置，设置好关键帧后，然后调用对应动画即可实现，具体代码如下：

<style> 
/* 第一步：定义动画，设置关键帧 */
    @keyframes move {
        0% {
            transform: translate(0,0);
        }
        25% {
            transform: translate(1200px,0);
        }
        50% {
            transform: translate(1200px,600px);
        }
        75% {
            transform: translate(0,600px);
        }
        100% {
            transform: translate(0,0);
        }
    }
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
/* 第二步：调用动画 */
        animation: move 4s linear;   /* 并不是所有属性都需要写上，根据要求写对应属性即可 */
    }
</style>
</head>
<body>
    <div></div>
</body>

JJ_Smilewang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画

动画（animation）一样是CSS3中具有颠覆性的特征之一，可通过设置多个关键帧来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较我们昨天介绍的过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。1. 动画的制作步骤制作动画一共有两步：第一步：先定义动画，设置关键帧第二步：再使用（调用）动画1.1 用keyframes 定义动画（类似定义类选择器）@keyframes 动画名称 { 0%{ width:100px; }
复制链接

扫一扫