css3動畫詳解

時間 2019-11-29

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

原文原文鏈接

css動畫首先要明白動畫是一幀一幀的，由多個幀拼起來的動畫css

@keyframes

此爲動畫樣式中的關鍵幀，用關鍵幀來控制css動畫中的關鍵樣式。相比較過渡更加的容易空值中間的部分其指示了一個過程到另外一個過程的過程關鍵幀還具備名字，在應用的時候經過名字將其綁定。html

若是關鍵幀重複定義，則根據最後一次定義爲準git

關鍵幀中的important會被略過web

舉個栗子

定義一個關鍵幀瀏覽器

@keyframes myFrames {
	form {
		background:#a7e5c6;
		width:100px;
	}

	to {
		width:90%;
		background:#c6c2a3;
	}
}
複製代碼

樣式以下 bash

這樣就完成一次動畫操做函數

分開定義

也能夠進行分開定義按照百分號進行定義，結果以下關鍵幀以下工具

@keyframes myFrames {
	0% {
		width:200px;
		background:#827e64;
	}

	20% {
		width:400px;
		background:#86bece;
	}

	50% {
		height:600px;
		background:#af92aa;
	}

	90% {
		width:300px;
		height:400px;
		background:#698771;
	}
}
複製代碼

效果以下動畫

animation

animation 一樣是一個簡寫屬性，相比較js寫動畫來講，css動畫已經灰常簡單了。ui

大概看了一點純js動畫，js動畫核心在於對css樣式的更改，外加一個重複時間對css不斷的累加獲得動畫效果

下面依次說明

animation-name

和關鍵幀進行綁定必須和關鍵幀的名字相同（廢話）

animation-duration

指定一個動畫的週期

負值的動畫無效

舉一個栗子

div {
	width:300px;
	height:400px;
	background:#698771;
	margin:auto;
	animation-name: myFrames;
	animation-duration:.9s;
}

/*關鍵幀*/
@keyframes myFrames {
	0% {
		width:200px;
		background:#827e64;
	}

	20% {
		width:400px;
		background:#86bece;
	}

	50% {
		height:600px;
		background:#af92aa;
	}

	90% {
		width:300px;
		height:400px;
		background:#698771;
	}
}
複製代碼

動畫效果以下

animation-timing-function

定義一個動畫的過程，相似於過渡的函數一樣的，有貝塞爾曲線等等不在闡述

DevTools

谷歌瀏覽器的調試工具具備該方法，能夠直接使用調試工具繪製貝塞爾曲線

animation-delay

定義動畫的延遲

css以下

* {
	margin:0;
	padding:0;
}
body {
	position:relative;
}
div {
	width:400px;
	height:400px;
	position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
	border-radius:1000px;
	animation-name: myFrames;
	animation-duration:5s;
	animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
	animation-delay:.9s;
}
div div {
	width:40px;
	height:40px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	background:#e8e3da;
	animation-name:myCenter;
}

/*關鍵幀*/
@keyframes myFrames {
	from {
		left:0;
	}

	to {
		left:70%;
	}
}

@keyframes myCenter {
	from {
		left:0;
	}

	to {
		left:0;
	}
}
複製代碼

html以下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./index.css" type="text/css">
	<title>css動畫</title>
</head>
<body>
	<div>
		<div></div>
	</div>
</body>
</html>
<script src="./index.js"></script>
複製代碼

動畫延遲了0.9秒

animation-iteration-count

定義動畫的迭代次數infinite 爲永遠重複數值爲number

舉栗子

animation-iteration-count:3;
複製代碼

動畫重複播放3次。

animation-iteration-count:infinite;
複製代碼

動畫永遠重複播放

animation-direction

定義是否向前，向後，是否交替來回

若是想要重複的屢次播放，必須有animation-iteration-count的值爲infinity不然不會出現重複播放

normal

爲一個每次重複從新的位置開始播放（每次都將重置爲新狀態，開始執行）

reverse

倒序播放

alternate

奇數正向播放偶數倒序播放即來回

alternate-reverse

奇數倒序播放偶數正向播放即倒來回

ps 動畫具備繼承的屬性

animation-fill-mode

forwards

將會保留最後一個關鍵幀，讓其停留。

css

/*animation-iteration-count:infinite;*/
	animation-direction:alternate;
	animation-fill-mode:forwards;
複製代碼

backwards

將會應用第一個動畫值

和none的區別在於none使用默認的css樣式，backwards將會使用動畫的第一幀

/*animation-iteration-count:infinite;*/
	animation-direction:alternate;
	animation-fill-mode:backwards;
複製代碼

ps 加上註釋的緣由是由於若是不加將會重複播放。

both

將會遵照倒序仍是正序的停留

正序

/*animation-iteration-count:infinite;*/
	animation-direction:normal;
	animation-fill-mode:both;
複製代碼

倒序

/*animation-iteration-count:infinite;*/
	animation-direction:reverse;
	animation-fill-mode:both;
複製代碼

總寫

按照上方順序便可 css 以下

* {
	margin:0;
	padding:0;
}
body {
	position:relative;
}
div {
	width:400px;
	height:400px;
	position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
	border-radius:1000px;
	animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;
}
div div {
	width:40px;
	height:40px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	background:#e8e3da;
	animation-name:myCenter;
}

/*關鍵幀*/
@keyframes myFrames {
	from {
		left:0;
	}

	to {
		left:70%;
	}
}

@keyframes myCenter {
	from {
		left:0;
	}

	to {
		left:0;
	}
}
複製代碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./index.css" type="text/css">
	<title>css動畫</title>
</head>
<body>
	<div>
		<div></div>
	</div>
</body>
</html>
<script src="./index.js"></script>
複製代碼

演示效果 melovemingming.gitee.io/code/practi…

相關標籤/搜索

每日一句

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