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>
复制代码

使用jq来重定义css样式，这种方法其实违背了animate简化运动代码的初衷！

参考文章：
复制代码

电子猫

CSS3动画animation认识，animate.css的使用

固然咱们除了改变宽度width 还能够改变其余的属性：height、定位、移动、旋转、缩放等你所能想到的css属性

固然咱们除了改变宽度`width` 还能够改变其余的属性：`height`、定位、移动、旋转、缩放等你所能想到的css属性