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动画animation认识,animate.css的使用的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- Ionic3学习笔记(五)动画之使用 animate.css
本文为原创文章,转载请标明出处 目录 前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- 第五章 动画 44:动画-使用第三方animate.css类库实现动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
随机推荐
- 神经网络优化算法:Dropout、梯度消失/爆炸、Adam优化算法,一篇就够了!
1. 训练误差和泛化误差 机器学习模型在训练数据集和测试数据集上的表现.如果你改变过实验中的模型结构或者超参数,你也许发现了:当模型在训练数据集上更准确时,它在测试数据集上却不⼀定更准确.这是为什么呢 ...
- html页面中关于按钮type的要求
重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值.Internet Explorer 将提交 <button> 与 </button> 之 ...
- Spring Cloud Stream 核心概念
Spring Cloud Stream简介 Spring cloud stream是一个构建与Spring Boot和Spring Integration之上的框架,方便开发人员快速构建基于Messa ...
- Nginx总结(一)Linux如何安装Nginx
以前写过一些Nginx的文章,但都是用到什么说什么,没有一个完整系统的总结.趁最近有时间,打算将Nginx相关的内容重新整理一下.nginx系列文章地址如下:https://www.cnblogs.c ...
- Gradle-日志
日志就像是构建工具的 UI,如果输出太混乱,真正的警告和错误很容易就被忽略了.Gradle 定义了 6 种日志级别,以便于我们识别有用的信息. 日志级别 Gradle 的日志 和Android 一样也 ...
- Demo小细节-2
今天在牛客的题海中再次找虐,题目如下: public class B { public static B t1 = new B(); public static B t2 = new B(); { S ...
- MACOS安装使用kafka
安装(会自动依赖安装zookeeper) brew install kafka 启动zookeeper cd /usr/local/Cellar/kafka/2.1.1/bin/ ./zookeepe ...
- 新手学习FFmpeg - 调用API完成录屏
调用FFMPEG Device API完成Mac录屏功能. 调用FFMPEG提供的API来完成录屏功能,大致的思路是: 打开输入设备. 打开输出设备. 从输入设备读取视频流,然后经过解码->编码 ...
- awrcrt更新到2.1(重大更新)
awrcrt更新到了2.1 awrcrt迎来了最近一年的最大一次更新,从2.03直接跳跃了2.1版本.本次更新,给awrcrt带了全面的改变. 最主要的更新内容是什么呢?请看 更新了图表javascr ...
- 从强转 byte 说起
折腾的心,颤抖的手,只因在 main 函数中执行了一次 int 强转 byte 的操作,输出结果太出所料,于是入坑,钻研良久,遂有此篇. 我们都知道,Java中有8中基本数据类型,每种类型都有取值范围 ...