CSS3动画animation认识和Animate.css的使用
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}}
效果图:
当然我们除了改变宽度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;
}
效果图:
没考虑小马的头的方向,只是写了旋转的效果,很多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>
效果如下:
接下来,就是对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
简化运动代码的初衷!
css3动画和animate.css
动画库使用
CSS3动画
css3
动画可以分为两种。transition
过渡动画和keyframes
关键帧动画
过渡动画
第一种叫过渡(transition
)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform
)等等这些属性。css
过渡只能定义首和尾两个状态,所以是最简单的一种动画。
要想使一个元素产生过渡动画,首先要在这个元素上用transition
属性定义动画的各种参数。可定义的参数有
transition-property
:规定对哪个属性进行过渡
transition-duration
:定义过渡的时间,默认是0
transition-timing-function
:定义过渡动画的缓动效果,如淡入、淡出等,默认是 ease
transition-delay
:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0
为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition
属性上:
如果是使属性的默认值,则可以省略:
相当于:
如果想要同时过渡多个属性,可以用逗号隔开,如:
使用transtion
属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css
中给这个元素定义一个类(:hover
等伪类也可以),这个类描述的是过渡动画结束时元素的状态。
这样,当我们把鼠标移动到div
上的时候,div
的状态发生了变化,就能看到宽度从100
到400
,高度从100
到400
,背景颜色从黑到红的,过渡时间为3
秒的过渡效果了。
除了使用hover
等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js
把类加到元素上面:
关键帧动画
第二种叫做关键帧(keyframes
)动画。不同于第一种的过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧来说的话,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。
关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes
来定义动画。具体格式为:
@keyframes 动画名称{时间点 {元素状态}时间点 {元素状态}…
}
例如:
这段代码定义了一个名为demo
,且有5个关键帧的动画。0% ,10%
等这些表示的是时间点,是相对于整个动画的持续时间来说的,时间点之后的花括号里则是元素的状态属性集合,描述了这个元素在这个时间点的状态,动画发生时,就是从第一个状态到第二个状态进行过渡,然后从第二个状态到第三个状态进行过渡,直到最后一个状态。一般来说,0%
和100%
这两个关键帧是必须要定义的。
关键帧的书写方式很灵活,一行可以写多个关键帧。
甚至它们之间的空格也是可以不要的。
现在我们知道了怎么去定义一个关键帧动画了,那怎么去实现这个动画呢?其实很简单,只要把这个动画绑定到某个要进行动画的元素上就行了。
把动画绑定到元素上,我们可以使用animation
属性。animation
属性有以下这些:
像前面讲的transition
属性一样,也可以把这些animation
属性简写到一个animation
中,使用默认值的也可以省略掉。但 animation-play-state
属性不能简写到animation
中。
只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。
注意,为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀
animate.css
的使用
1.html
版本
animate.css
是一个css3
动画库,可以到github
上去下载,里面预设了很多种常用的动画,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:
首先在head
中引入下载的animate.css
文件
然后你想要哪个元素进行动画,就给那个元素添加上animated
类 以及特定的动画类名,animated
是每个要进行动画的元素都必须要添加的类。
假设使用jquery
,要给一个id
为demo
的元素添加一个摇动的动画,因为摇动的动画类名为shake
,所以代码是这样的:
这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。
至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css
里面所定义的就行了。
注意这些属性还要记得加上各浏览器的前缀。
总之是很灵活的,说到底不就是一个css
文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能。
2.vue
版本
1.安装animate.css
npm install animate.css --save安装
2.引入
方式1 在style
中引入(加了scoped
只在当前组件使用,没有加则全局可用)
<style lang="scss" scoped>
@import 'animate.css';</style>
方式2 在main.js
全局引入(全局可用)
import 'animate.css'
方式3在script
引入(全局可用)
<script>
import Header from '../components/common/Header'
import 'animate.css'
export default {}
</script>
3.添加样式 必须添加animated
类 +想要动画效果
<h3 class="animated bounceInUp" v-if="flag">弹跳进入,弹跳出去效果</h3>
4.想要更好效果可用vue
自带的transition
包裹组件
在进入/离开的过渡中,会有 6 个 class
切换。
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
完整例子
<template><section class="home"><v-header></v-header><div>主页</div><input type="button" value="显示/隐藏" @click="flag=!flag" :duration="2000"><transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown"><h3 v-if="flag">弹跳进入,弹跳出去效果</h3><!--通过一个标识符,然后可以不停将转换true/false,达到隐藏显示的目的--></transition></section>
</template><script>
import Header from '../components/common/Header'
export default {name:'home',components:{'v-header':Header},data(){return{flag:false}}
}
</script><style lang="scss" scoped>
@import 'animate.css';
</style>
CSS3动画animation认识和Animate.css的使用相关推荐
- css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
- CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
- CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
- 幻灯片(基于CSS3动画animation)
效果预览: 实现思路: 类似于:h5+css3+js之移动端轮播图 将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation定义每一帧的动画,在每一帧 ...
- Vue动画——使用最新版Animate.css教程
目录 1. 安装Animate.css 2. 配置 Animate.css 3. 在指定元素上使用 4. 在过渡动画中使用 5. 经典范例 -- 页面向下滚动到指定位置时,顶部显示悬浮搜索框 6. a ...
- css3动画源代码库_清理CSS代码库
css3动画源代码库 You have just been onboarded to an existing project to replace a departing developer. Or ...
- Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题.CSS3 的出现,让动画变得更加容易,性能也更加好. ...
- 【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
- 页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
最新文章
- Arnold+Shave 渲染毛发
- HTML 5 Web 存储-localStorage
- android 重绘如何能不闪一下屏幕_回流和重绘
- 狸猫换太子--删除无头单链表中结点
- Chrome浏览器的自动保存密码提示功能禁用方法
- jmeter学习指南之中文乱码
- 最值得收藏的 人工智能导论 全部知识点思维导图整理(王万良慕课课程)
- 8.计蒜客ACM题库.A2019 Save the Room
- 推荐一款调试工具:深蓝串口调试工具 2021秋季版(2.16.1.),一直使用这个,最近更新好快。
- Spring Security 单点登录系统
- 上百种Python炫酷可视化案例珍藏版——看完掌握~一键三连~老板都想要给你升职加薪哟!
- python微信群发助手在哪_python 微信群发_Python-Pyqt5编写微信群发软件
- lisp实心圆点怎么画_cad中怎么样画实心圆点
- Python 对象烤地瓜
- 独家专访英特尔AI布道师 | 通信工程到人工智能的高质量转型
- python参考手册 豆瓣_详解python 模拟豆瓣登录(豆瓣6.0)
- c1TrueDBGrid在C#中的研究
- c#中sealed关键字的使用
- html制作古诗带图画大全,春天的古诗配图画大全
- 安装w3af时已经安装retire却提示没有安装的问题
热门文章
- 使用poi导出excel,及合并单元格边框显示问题
- 计算机考研有什么公众号,大学生应该关注的公众号有哪些推荐?
- php java 私钥 转换格式,php公钥私钥 3 ---非标准格式转换为标准格式
- 首批!智领云CTO宋文欣入选“开源GitOps产业联盟技术委员会”成员名单
- 云计算机的价值,云计算现在的价值都有哪些?
- 玩客云添加到我的计算机,玩客云怎么备份?将电脑文件备份到玩客云教程
- html5 视差地图,用HTML5构建高性能视差网站的图文代码详解
- kubectl config 命令
- React(四):Smart组件与Dumb组件
- 强化学习1 高斯赛德尔迭代