web基础学习（十）CSS3之 @keyframes 、animation

最新推荐文章于 2024-04-24 19:48:54 发布

June.1

最新推荐文章于 2024-04-24 19:48:54 发布

阅读量509

点赞数

分类专栏： web基础 web前端文章标签： @keyframes animation

本文链接：https://blog.csdn.net/qq_39043923/article/details/88962900

版权

web前端同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

web基础

15 篇文章 1 订阅

订阅专栏

css3新增属性@keyframes（关键帧），可以帮助开发者不必依赖JavaScript，只使用css代码完成动画制作
那么如何使用@keyframes呢?
这里有两个重要知识点：

1.@keyframes 定义关键帧

语法：

@keyframes 两帧动画名称 { from {top:0px;} to {top:200px;} }
@keyframes 多帧动画名称 { 0% { transform: translate(100px, 0); } 50% {transform: translate(200px, 200px); } 100%{ transform: translate(0, 100px); } }

动画内可以任意自定义合法的 CSS 样式属性

/*两帧*/
@keyframes mymove
{
	from {top:0px;}/*第1帧*/
	to {top:200px;}/*第2帧*/
}
/*多帧*/
@keyframes mymove {
	/*第1帧*/
    0% {
         transform: translate(100px, 0);
     }
     /*第2帧*/
     25% {
         transform: translate(200px, 0);
     }
     /*第3帧*/
     50% {
         transform: translate(200px, 200px);
     }
     /*第4帧*/
     75% {
         transform: translate(0px, 200px);
     }
     /*第5帧*/
     100% {
         transform: translate(0, 100px);
     }
 }

2. animation 使用帧动画

animation-name: 动画名称（必须）
animation-duration: 动画运行时间（必须）
animation-timing-function: 动画运行方式速度曲线如：linear ,ease ,ease-in.ease-out,ease-in-out
animation-delay: 动画延时时间
animation-iteration-count: 动画播放次数填写数字,如果是 infinite：一直播放
animation-direction: 动画下一周期轮流反向播放动画 ,默认是normal 。alternate :动画轮流反转播放
animation-play-state: 指定动画是否正在运行或已暂停, paused:停止。running：运行
animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），动画状态。

none:不改变默认状态。
forwards:保持最后一帧（最后一帧中定义）,
backwards:在animation-delay所指定的一段时间内。动画开始之前,应用开始属性也就是起始位置在第一帧的位置（第一帧中定义）
both: forwards,backwards属性都被应用

综合方式暂时不受填写顺序影响,按照习惯应该如上的流程填写属性

.container{
	width: 200px;
    height: 200px;
    /*单独定义*/
    background-color: yellow;
    /*动画名称 （必须）*/
	animation-name: mymove;
	/*动画运行时间（必须）*/
    animation-duration: 10s;
    /*动画运行方式速度曲线*/
    animation-timing-function: linear;
    /*动画延时时间*/
    animation-delay: 2s;
    /*动画播放次数*/
    animation-iteration-count: 1;
    /*动画下一周期轮流反向播放动画*/
    animation-direction: alternate;
    /*指定动画是否正在运行或已暂停。*/
    animation-play-state: running;
    /*规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），动画状态。*/
    animation-fill-mode: both;
  	/*综合定义*/
    animation:  mymove 10s infinite both ease 2s alternate;
    /*名称和时间必须定义*/
    animation:  mymove 10s ;
}

实战示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        @keyframes boxmove {
            0% {
                transform: translate(100px, 0);
            }
            25% {
                transform: translate(200px, 0);
            }
            50% {
                transform: translate(200px, 200px);
            }
            75% {
                transform: translate(0px, 200px);
            }
            100% {
                transform: translate(0, 100px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            animation: boxmove 10s linear;
            animation-name: boxmove;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-play-state: running;
            animation-fill-mode: both;
            animation: boxmove 10s both ease 2s alternate infinite;
        }
    </style>

</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

June.1

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web基础学习（十）CSS3之 @keyframes 、animation

css3新增属性@keyframes（关键帧），可以帮助开发者不必依赖JavaScript，只使用css代码完成动画制作那么如何使用@keyframes呢?这里有两个重要知识点：1.@keyframes 定义关键帧语法：@keyframes 两帧动画名称 { from {top:0px;} to {top:200px;} }@keyframes 多帧动画名称 { 0% { tr...
复制链接

扫一扫