CSS3 animation 关键帧动画 keyframes

最新推荐文章于 2024-01-08 17:30:15 发布

＊且听风吟

最新推荐文章于 2024-01-08 17:30:15 发布

阅读量697

点赞数

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

本文链接：https://blog.csdn.net/HH18700418030/article/details/125978376

版权

animation 基本用法

语法格式：

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

第一个参数：name (animation-name)

name 定义动画的名字，CSS3定义采用” 关键帧[keyframes] “来定义动画：

@keyframes mymove{
   
    0% {
    opacity : 1}
    100% {
    opacity : 0}
}

如上例，定义了一个动画名字叫 mymove，0% 代表动画初，100% 代表动画末，中间的动画过程由浏览器渲染引擎进行渲染。

可以使用时间段 0%~100%；或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

对应不同的浏览器需要加前缀做兼容。

第二个参数：duration (animation-duration)

duration 规定完成整个动画持续的时间，必须带时间单位，s或者ms。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>动画</title>
<link rel="stylesheet" href="css/animate.css">
<style> 
div
{
     
width:100px;
height:100px;
background:green;
position:relative;
animation:mymove infinite;
animation-duration:5s;

/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:5s;
}

@keyframes mymove
{
     
from {
     top:0px;}
to {
     top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
     
from {
     top:0px;}
to {
     top:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

<div></div>

<p><b>注释：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>

</body>
</html>

页面效果：
在这里插入图片描述

第三个参数：animation-timing-function

timing-function 规定动画运动方式的贝塞尔曲线，基本值有以下几种：

linear

规定动画从头到尾的速度是相同的。

ease

默认；规定动画以低速开始，然后加快，在结束前变慢。

ease-in

规定动画以低速开始。

ease-out

规定动画以低速结束。

ease-in-out

规定动画以低速开始和结束。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>动画</title>
<link rel="stylesheet" href="css/animate.css">
<style> 
div
{
     
width:100px;
height:50px;
background:green;
color:white;
font-weight:bold;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

#div1 {
     animation-timing-function:linear;}
#div2 {
     animation-timing-function:ease;}
#div3 {
     animation-timing-function:ease-in;}
#div4 {
     animation-timing-function:ease-out;}
#div5 {
     animation-timing-function:ease-in-out;}

/* Safari and Chrome: */
#div1 {
     -webkit-animation-timing-function:linear;}
#div2 {
     -webkit-animation-timing-function:ease;}
#div3 {
     -webkit-animation-timing-function:ease-in;}
#div4 {
     -webkit-animation-timing-function:ease-out;}
#div5 {
     -webkit-animation-timing-function