CSS3動畫animation認識，animate.css的使用

時間 2019-11-06

標籤 css3 css 動畫 animation 認識 animate.css animate 使用欄目 CSS 简体版

原文原文鏈接

CSS動畫能夠取代js動畫在移動端會更加流暢！
下面是一個的繪製太陽系各大行星運行軌跡筆記，能夠自學參考！javascript

首先咱們須要建立一個@keyframes規則css

@keyframes name{
	from{width:1px}
	to{width:100px}
}
//或者使用百分比
@keyframes name{
	0%{width:1px}
	100{width:100px}
}
複製代碼

建立好以後，咱們須要在css選擇器裏引用咱們寫的規則，html

<div class="box1"></div>
複製代碼

.box1{
		width: 0px;
		height: 100px;
		background-color: #00FF7F;
		/* 引用 / 捆綁*/
		animation: first 2s;
	}
@keyframes first{
		0%{width:1px}
		100{width:100px}
	}
複製代碼

效果圖： java

固然咱們除了改變寬度`width` 還能夠改變其餘的屬性：`height`、定位、移動、旋轉、縮放等你所能想到的css屬性

css3動畫屬性很是多，我感受經常使用的是animation的簡寫形式和一個動畫週期須要花費的時間animation-duration;jquery

如下也是一個小的實例：css3

<div class="horse"></div>
複製代碼

html,
body {
	height: 100%;
}

.horse {
	width: 128px;
	height: 128px;
	background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;
	background-size: 100% 100%;

	transform: scaleX(-1);
	animation: bounce 0.1s infinite;
}

@keyframes runhorse {
	0% {
		transform: translate(0, 0);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	25% {
		transform: translate(calc(100vw - 128px), 10px) scaleY(-1);
		 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	}

	50% {
		transform: translate(calc(100vw - 129px), calc(100vh - 200px));
		 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	}

	75% {
		transform: translate(0, calc(100vh - 128px)) scaleX(-1);
	}

	100% {
		transform: translate(10px, 10px) translate3d(0, -4px, 0);
	}
}

body:hover .horse {
	animation: runhorse 2s linear infinite;
}
複製代碼

效果圖： git

沒考慮小馬的頭的方向，只是寫了旋轉的效果，不少css屬性均可以用到動畫效果裏。能夠參考~
推薦使用 animate.css ①下載 animate.css

官方地址：animate.cssgithub

②或者css3動畫

直接進入animate.css 隨後右鍵另存爲便可使用ide

③ 直接在頁面頂部head標籤經過link引入

基本模板以下：

<!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> .demo1{ font-size: 30px; font-weight: bold; color: #00008B; } </style>
	</head>
	<body>
		<div class="demo1 animated zoomIn infinite">
			Anyw3c
		</div>
	</body>
</html>
複製代碼

效果以下：

接下來，就是對animate.css運動的一個小總結，雖然很少，可是歸類後方便後面查找！ /按官網順序/

①Attention seekers

bounce 輕輕跳躍一下（彈跳；彈起，反跳；彈回）
flash 閃爍兩次（使閃光；反射）
pulse 慢慢放大，而後回縮（跳動，脈跳）
shake 左右輕晃幾回
swing 以中間頂部爲中心小幅度晃動
tada 很調皮的一個小晃動，ps：只能這麼描述了
wobble 大幅晃動，地動山搖

②Bouncing Entrances

bounceIn 正中央，從無到有，輕輕抖動幾回
bounceInDown 從右側進來，無到有，輕輕抖動幾回
bounceInLeft 雷同，可是必定要注意大小寫「專業點叫駝峯式」
bounceInRighr
bounceInUp
bouncing Exits
bounceOut 正中央，從有到無，輕輕抖動幾回消失
bounceOutDown
bounceOutLeft
bounceOutRighr
bounceOutUp

③Fading Entrances

fadeIn 跟上面bounceIn仍是有些區別的，畢竟不抖
fadeInDown 逐漸從上面down下來
fadeInDownBig逐漸從上面down下來，可是跟上面那位有稍微區別，加了big後起始位置是從設備外進來的
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightNig
fadeInUp
fadeInUpBig 用up測試下big吧
fading Exits
fadeOut 恰與fadeIn相反
fadeOutDown 逐漸從上面down下去消失，你肯定不玩玩big了？
fadeOutDownBig逐漸從上面down下去，可是跟上面那位有稍微區別，加了big後終點位置是從設備外
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightNig
fadeOutUp
fadeOutUpBig /如下這些都是經常使用的哦！/

④Flippers

flip 一個誇張的放大飯莊縮小效果
flipInX 沿中心水平軸小幅度反轉出來
FlipInY 沿中心豎直軸小幅度反轉出來
flipOutX 沿中心水平軸小幅度反轉消失
FlipOutY 沿中心豎直軸小幅度反轉消失

⑤Lightspeed

lightSpeedIn 字面意思就是光速出來嘍，記得調快速度哦，什麼，怎麼調速我沒說麼？好吧，先留個坑，待會兒補。
lightSpeedOut 光速消失

⑥Rotating Entrances
rotateIn 準確說是以正中心點180度旋轉漸顯
rotateInDownLeft 沒錯，就是以左上角爲中心點轉下來
rotateInDownRight 就是以右上角爲中心點轉下來
rotateInUpLeft 就是以左上角爲中心點轉上去
rotateInUpRight 就是以右上角爲中心點轉上去
rotating Exits
rotateOut 準確說是以正中心點180度旋轉漸隱
rotateOut DownLeft
rotateOut DownRight
rotateOut UpLeft
rotateOut UpRight

⑦Sliding Entrances

slideInUp 這個slide感受就有點雞肋了，有了上邊的Lightspeed、fadeIn，就會看出這個的弊端，動做幅度過小
slideInDown
slideInLeft
slideInRight
sliding Exits
slideOutUp 表現依舊很差
slideOutDown
slideOutLeft
slideOutRight

⑧Zoom Entrances

zoomIn 牢記哦，正中央出來的，作效果是最棒了
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoom Exits
zoomOut 牢記哦，正中央消失的，配合上面的zoomIn作效果是最棒了
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

⑨Specials

hinge 懸掛，顫抖，掉下去
rollIn 從左側旋轉進入
rollOut 向右側旋轉消失到此呢，整個animate.css裏的全部動做效果規整完畢。回上邊去填坑！！

算了，仍是在這裏填吧，若想用到延時加載和控制運動過渡時間，就必需要用到jquery了，因此咱們先去找個jq引入到頁面底部

Demo以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/animate.css" />
<style type="text/css"> .test{ position: absolute; width: 100px; font-size: 50px; top: 50px; left: 50%; margin-left: -50px; } </style>
</head>
<body>
<div class="animated rollIn test">test</div>
<script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(document).ready(function(){ &emsp;&emsp;$('.test').css({'animation-duration':'.3s','animation-delay':'3s'}) }) </script>
</body>
</html>
複製代碼