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

栏目: CSS3 · 发布时间: 4年前

内容简介：CSS动画 可以取代js动画 在移动端会更加流畅！下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！首先我们需要创建一个@keyframes规则

CSS动画 可以取代js动画 在移动端会更加流畅！

下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！

首先我们需要创建一个@keyframes规则

@keyframes name{
	from{width:1px}
	to{width:100px}
}
//或者使用百分比
@keyframes name{
	0%{width:1px}
	100{width:100px}
}
复制代码

创建好之后，我们需要在css选择器里引用我们写的规则，

<div class="box1"></div>
复制代码
.box1{
		width: 0px;
		height: 100px;
		background-color: #00FF7F;
		/* 引用 / 捆绑*/
		animation: first 2s;
	}
@keyframes first{
		0%{width:1px}
		100{width:100px}
	}
复制代码

效果图：

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

当然我们除了改变宽度 width 还可以改变其他的属性： height 、定位、移动、旋转、缩放等你所能想到的css属性

css3动画属性非常多，我感觉常用的是 animation 的简写形式和一个动画周期需要花费的时间 animation-duration ;

以下也是一个小的实例：

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

效果图：

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

没考虑小马的头的方向，只是写了旋转的效果，很多css属性都可以用到动画效果里。可以参考~

推荐使用 animate.css ①下载 animate.css

官方地址： animate.css

②或者

直接进入animate.css 随后右键另存为即可使用

③ 直接在页面顶部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>
复制代码

效果如下：

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

接下来，就是对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(){
  $('.test').css({'animation-duration':'.3s','animation-delay':'3s'})
})
</script>
</body>
</html>
复制代码

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

参考文章：
复制代码

电子猫


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
人人都是产品经理

人人都是产品经理

苏杰 / 电子工业出版社 / 2014-9-1 / CNY 55.00

《人人都是产品经理（纪念版）》为经典畅销书《人人都是产品经理》的内容升级版本。对于大量成长起来的优秀互联网产品经理，为数不少想投身产品工作的其他岗位从业者，以及更多有志从事这一职业的学生而言，这本书曾是他们记忆深刻的启蒙读物、思想基石和行动手册。作者以分享经历与体会为出发点，以“朋友间聊聊如何做产品”的语气，将自己数年产品工作过程中学到的思维方法与做事方式，及其它们对自己的帮助，系统性地梳理为用户......一起来看看 《人人都是产品经理》 这本书的介绍吧!

码农工具
SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3