animation 动画

最新推荐文章于 2023-04-30 23:07:04 发布

原创最新推荐文章于 2023-04-30 23:07:04 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

6 篇文章

订阅专栏

-- 关键帧 --- keyFrames ---》》使用时要加各浏览器内核（-ms-：IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核）

-- 类似于 flash

--- 只有指明两个状态，之间的过程由计算机自动计算

-- 关键帧的时间单位

--- 只有指明两个状态，之间的过程由计算机自动计算

-- 类似于 flash

---数字：0% ，25% ，....，100%等...

-- 字符：from(0%), to(100%)

-- 格式(1)：

@ keyframes 动画名称{

0%{动画状态}

10%{动画状态} .......100%{动画状态}

}

@-webkit-keyframes dy{
		0%{
           width:100px;
		}
		100%{
           width:500px;
		}

-- 格式(2)：

@ keyframes 动画名称{

from{ 动画状态}

to{动画状态}

} -- 也可以只有 to

animation 动画的调用

-- 调用标签（#div1,XXX:hover 之类的）

-- 必要属性：

--> animation name : 动画名称（关键帧名称）

--> animation duration: 动画时间

-- animation-play-state 播放状态（running播放和 paused 暂停）

-webkit-animation:2s dy;

-- 可选属性(1)

animation-timing-function 动画运动的形式

-- linear // 匀速

-- ease //缓冲

-- ease-in //由慢到快

-- ease-out //由快到慢

-- ease -in-out //由慢到快再到慢

-- cubic-bezier( number ,number,number,number )

特定的贝赛尔曲线类型，4 个数值都需要在【0~1】之间

-- 可选属性(2)

-->> animation-delay // 动画延迟时间(停顿)

-->> animation-iteration-count： //重复次数 -- infinite 为无限次数

-->> animation-direction: //播放前重置

-- 动画是否重置后再开始播放

-- alternate // 动画运动完一遍后反向进行运动

-- normal // 动画第二次直接跳到0%的状态开始

把所有属性写一起的方法：

.box{width:100px;height:100px;background:red;position:absolute;-webkit-animation:4s dy ease-out infinite ;
	}

DIV在方框四周转动示例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<style>
	@-webkit-keyframes dy{
		0%{
          left:0;top:0;
		}
		25%{
          left:300px;top:0;
		}
		50%{
          left:300px;top:300px;
		}
		75%{
          left:0;top:300px;
		}
		100%{
          left:0;top:0;
		}
	}
	#div1{width:400px;height:400px;border:1px solid #000;position:relative;}
	.box{width:100px;height:100px;background:red;position:absolute;-webkit-animation:4s dy ease-out infinite ;
	}
	#div1:hover .box{ -webkit-animation-play-state:paused;}
	</style>
</head>
<body>
 <div id="div1">
     <div class="box"></div>
 </div>
</body>
</html>

给对象绑定动画回调函数：

Obj.addEventListener('webkitAnimationEnd',function(){},false)

纯CSS无缝滚动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS无缝滚动</title>
<style>
@-webkit-keyframes move
{
	0%{
		left:0;
	}
	100%
	{
		left:-500px;
	}	
}
#wrap{ width:500px;height:100px;border:1px solid #000; position:relative;margin:100px auto; overflow:hidden;}
#list{ width:200%; position:absolute;left:0;top:0;margin:0;padding:0; -webkit-animation:3s move infinite linear;}
#list li{ list-style:none;width:98px;height:98px;border:1px solid #fff;background:#000; color:#fff; font:50px/98px Arial; text-align:center; float:left;}
#wrap:hover #list{ -webkit-animation-play-state:paused;}
</style>
</head>
<body>
<div id="wrap">
	<ul id="list">
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>