css3的动画属性

最新推荐文章于 2020-10-14 08:45:00 发布

back_glim

最新推荐文章于 2020-10-14 08:45:00 发布

阅读量138

点赞数

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

本文链接：https://blog.csdn.net/back_glim/article/details/104585478

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3的动画属性

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片。

关键帧

关键帧的定义：

不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

制作css3动画首页需要的就是建立关键帧，建立关键帧的代码伪

	@keyframes name{
	 from{初始状态属性}
	to{结束状态属性}
}

或者

	@keyframes name{
	 0%{初始状态属性}
	0%~100%（中间再可以添加关键帧）
	100%{结束状态属性}
}

引用关键帧（ animation）

animation-name

检索或设置对象所应用的动画名称也就是关键帧的名称
必须与规则@keyframes配合使用，

  :@keyframes name{}  animation-name:name;

nimation-duration

检索或设置对象动画的持续时间
说明：

	 animation-duration:3s;

动画完成使用的时间为3s

animation-timing-function

检索或设置对象动画的过渡类型
属性值

linear：线性过渡。
ease：平滑过渡。等
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
step-start:马上跳到动画每一结束桢的状态

animation-delay

检索或设置对象动画延迟的时间
说明：

	animation-delay:0.5s;

动画开始前延迟的时间为0.5s)

animation-iteration-count

检索或设置对象动画的循环次数
属性值

   animation-iteration-count: infinite | number;

infinite：无限循环 + number: 循环的次数

animation-direction

检索或设置对象动画在循环中是否反向运动
属性值

   animation-direction: normal| reverse |alternate|alternate-reverse

normal：正常方向 + reverse：反方向运行 + alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state

检索或设置对象动画的状态
属性值

   animation-play-state:running | paused;

running:运动 + paused: 暂停 + animation-play-state:paused;
可运用hover设置当鼠标经过时动画停止，鼠标移开动画继续执行

animationd的复合属性：

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

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            background: cadetblue;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: green;
            transition: 5s;
            animation: FD 5s linear 1s infinite alternate ;
        }




             @keyframes FD{
            0%{
               transform: translateX(0) translateY(0);
            }
            25%{
                transform: translateX(300px) translateY(0);
            }
            50%{
                transform: translateX(300px) translateY(300px);
            }
            75%{
              transform: translateX(0) translateY(300px);
            }
            100%{
                transform: translateX(0) translateY(0);
            }

        }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">

        </div>
    </div>
    
</body>
</html>

解释：在这里插入图片描述

效果如下：小正方形的运动

back_glim

关注

0
点赞
踩
0

收藏

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

css3的动画属性通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片。关键帧关键帧的定义：不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。制作css3动画首页需要的就是建立关键帧，建立关键帧的代码伪@keyframes ...
复制链接

扫一扫