css3動畫animation

時間 2019-11-20

標籤 css3 css 動畫 animation 欄目 CSS 简体版

原文原文鏈接

1.@keyframes 動畫規則的定義

語法 @keyframes animationname {keyframes-selector {css-styles;}}css

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值：0-100%; from（與 0% 相同）; to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

2.animation 動畫申明

語法 animation: name duration timing-function delay iteration-count direction;
默認值： none 0 ease 0 1 normal
繼承性： no
版本： CSS3
JavaScript 語法： object.style.animation="mymove 5s infinite"html

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。（必須賦值）
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

animation-timing-function：類型動畫

值	描述
linear	動畫從頭至尾的速度是相同的
ease	默認。動畫以低速開始，而後加快，在結束前變慢
ease-in	動畫以低速開始
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
infinite	一直跑動畫

三、實現一個圓圈放大的動畫效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	@keyframes testname {
	  from {transform: scale(0);}
	  to {transform: scale(1);}
	}
	.test{
		animation: testname 1.5s infinite;
		background-color: aquamarine;
		width: 20px;
		height:20px;
		border-radius: 50%;
	}
</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>

4.多個這樣的圓圈能夠作成一個動態加載的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	@keyframes testname {
	  from {transform: scale(1);}
	  75% {transform: scale(0);}
	}
	.test{
		animation: testname 1.5s infinite;
		background-color: aquamarine;
		width: 20px;
		height:20px;
		border-radius: 50%;
		float: left;
		margin-left: 10px;
	}
	.two{
		 animation-delay: 0.25s;
	}
	.three{
		 animation-delay: 0.5s;
	}
</style>
</head>
<body>
	<div class="test"></div>
	<div class="test two"></div>
	<div class="test three"></div>
</body>
</html>

效果圖：
3d

注意點:
code

相關標籤/搜索

android.support.v4.animation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。