CSS3动画详解(结合实例)
一、使用CSS3动画代替JS动画
- JS动画频繁操作DOM导致效率非常低
- 在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint）
- 可以避免占用JS主线程
这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animation
二、CSS3动画animation属性(可直接跳转三、实例)
- 简写:
//模板
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
//实例
animation: myAnimationName 2s linear 1s infinite forward;
- 细说
animation-name(必填) //规定动画名称
animation-duration(必填) //完成动画的时间
//值：time(1s.2s...) 默认值为 0，意味着没有动画效果
animation-timing-function(常用) //动画运动的速度
/*
值： linear 匀速
ease(默认) 变速(先慢后快,再由快变慢)
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
*/
animation-delay //动画在启动前的延迟间隔
//值：time 默认值为 0
animation-iteration-count(常用) //动画的播放次数
/*
值：number 默认值1
infinite 动画无限次播放
*/
animation-direction //是否轮流反向播放动画
/*
值: normal 正常
reverse 反向播放
alternate 在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
alternate-reverse 在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
*/
animation-fill-mode(常用) //当动画不播放时当动画完成时.要处于什么状态
/*
值： none 默认，播放完动画后，画面停在起始位置
forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
*/
animation-play-state //动画是否正在运行或已暂停
/*
值： paused 指定暂停动画
running 指定正在运行的动画，默认
*/
三、两个案例:CSS3实现弹窗、轮播
1. CSS3实现弹窗效果
效果图
代码实现
//html
<body>
<div class="btnDiv">
<button class="openPopUpBtn" id="openBtn">弹窗</button>
</div>
<div class="popUp">
<p>我是弹窗内容</p>
<button class="closePopUpBtn" id="closeBtn">关闭</button>
</div>
</body>
//css
/*button样式*/
.btnDiv{
text-align: center;
}
.openPopUpBtn,.closePopUpBtn{
width:60px;
height:40px;
line-height:40px;
border:1px solid #c9c9c9;
background-color: #FFF;
box-shadow: 1px 1px 1px 1px #eee;
}
.openPopUpBtn{
margin-top:50px;
}
.openPopUpBtn:hover,.closePopUpBtn:hover{
background-color: #eee;
cursor:pointer;
}
/*弹框样式*/
.popUp{
width:600px;
height:500px;
text-align: center;
background-color: #FFFeee;
border:1px solid #ccc;
box-shadow: 1px 1px 1px 1px #eee;
position:absolute;
left:50%;
margin-left:-300px;
opacity: 0; /* 透明度为0 */
}
.closePopUpBtn{
position: absolute;
bottom:20px;
left:50%;
transform:translate(-50%);
}
html结构比较简单,一个按钮、一个弹窗。样式大家可以自行选择,这部分不是重点.
下面是实现的核心！！！！ ⬇️
我们先看JS部分,仅仅只是实现点击功能,不做JS动画
window.onload = function(){
var popUp = document.getElementsByClassName('popUp'); //获取div.popUp的DOM节点,注意！popUp此时是一个数组
var openBtn = document.getElementById('openBtn'); //获取点击按钮的DOM节点
var closeBtn = document.getElementById('closeBtn'); //获取弹框里面关闭按钮的DOM节点
//点击弹窗按钮触发事件
openBtn.onclick = function(){
//给div.popUp添加一个名叫showCont的id,随后该id执行对应动画
popUp[0].setAttribute('id','showCont');
}
//点击关闭按钮触发事件
closeBtn.onclick = function(){
//给div.popUp添加一个名叫hiddenCont的id,随后该id执行对应动画
popUp[0].setAttribute('id','hiddenCont');
}
}
再来看一下重点CSS3动画部分
/*定义CSS样式*/
/*定义打开弹窗动画*/
#showCont{
animation: showPopUp 1s;
animation-fill-mode: forwards; /*保持动画后的状态*/
}
/*定义关闭弹窗动画*/
#hiddenCont{
animation: hiddenPopUp 1s;
animation-fill-mode: forwards;
}
/*定义动画规则*/
//打开弹窗动画
@keyframes showPopUp{
0%{
opacity: 0;
top:-60%;
transform: rotateZ(0deg);
//初始透明度为0,位于顶部-60%位置,旋转Z轴为0
}
50%{
transform: rotateZ(-10deg);
//动画进行一半的时候,规定旋转Z轴为-10度
//此时透明度和顶部位置都会自动计算
}
100%{
opacity: 1;
top:20%;
transform: rotateZ(0deg);
//动画结束后的最终参数
}
}
//关闭弹窗动画 和打开动画相反即可
@keyframes hiddenPopUp{
0%{
opacity: 1;
top:20%;
transform: rotateZ(0deg);
}
50%{
transform: rotateZ(-10deg);
}
100%{
opacity: 0;
top:-60%;
transform: rotateZ(0deg);
}
}
至此我们第一个案例:CSS3动画实现弹窗就完成啦。
我们接下来看第二个案例:轮播图。这个案例比较简单
实现思路:
- 定义一个父级,规定宽度和高度只能显示一个轮播图大小,超出部分隐藏
//html
<div class="carousel"></div>
//css
.carousel{
width:100px;
height:100px;
overflow: hidden;
}
- 定义存放所有轮播图的盒子
//html
<div class="carousel">
<div class="items"></div>
</div>
//css
.items{
color:#FFF;
width:420px; //存放4个轮播图
position:absolute; //动画更改left达到轮播滚动的效果
left:0px;
animation:carouselMove 3s infinite; //定义动画相关属性
}
- 定义动画
//通过不断改变items的位置,从而显示不同的轮播图,实现效果
//当动画结束之后,又返回初始值,可以无数循环
@keyframes carouselMove{
0%{
left:0px;
}
35%{
left:-100px;
}
70%{
left:-200px;
}
100%{
left:-300px;
}
}
完整代码:
//html
<div class="carousel">
<div class="items">
<div class="item1">轮播1</div>
<div class="item2">轮播2</div>
<div class="item3">轮播3</div>
<div class="item1">轮播4</div>
</div>
</div>
//css
.carousel{
width:100px;
height:100px;
position:relative;
left:400px;
top:100px;
overflow: hidden;
}
.items{
color:#FFF;
width:420px;
position:absolute;
left:0px;
animation:carouselMove 3s infinite;
animation-direction: normal;
/*animation-timing-function:easy 规定动画运动的速度 animation-iteration-count:infinite 播放无数次*/
-webkit-animation:carouselMove 3s infinite;
-moz-animation-direction: normal;
}
.item1,.item2,.item3{
width:100px;
height:100px;
float:left;
}
.item1{
background-color: #12B7F5;
}
.item2{
background-color: #F9B041;
}
.item3{
background-color: #CCCCCC;
}
//定义动画
@keyframes carouselMove{
0%{
left:0px;
}
35%{
left:-100px;
}
70%{
left:-200px;
}
100%{
left:-300px;
}
}
以上就是CSS3动画的部分知识啦！谢谢！
需要源码的可以到这里下载:
源码
CSS3动画详解(结合实例)的更多相关文章
- css3学习--css3动画详解一(animation属性）
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- css3动画详解
一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一 ...
- CSS3动画详解（超详细）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- CSS3动画详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- css3学习--css3动画详解二（3d效果）
一.设置3D场景 perspective:800 //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴) //视点的位置 transf ...
- 转：【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...
随机推荐
- [转载]FileStream读写文件
FileStream读写文件 FileStream类:操作字节的,可以操作任何的文件 StreamReader类和StreamWriter类:操作字符的,只能操作文本文件. 1.FileStream类 ...
- P1258 小车问题
P1258 小车问题 蒟蒻精神自强不息蒟蒻精神永不言败加油加油ヾ(◍°∇°◍)ﾉﾞyeah yeah yeah 据说这是道小学奥数题抱歉蒟蒻的我没学过奥数,算了大概三大张演草纸,不得不说这题对于蒟蒻本 ...
- nginx实现MySQL负载均衡
默认Nginx只支持http的反向代理,要想nginx支持tcp的反向代理,还需要在编译时增加tcp代理模块支持,即nginx_tcp_proxy_module 下面操作步骤只让nginx支持tcp_ ...
- tomcat 启动时遇到org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet contained no TLDs
当发生这样的错误的时候 org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet ...
- 计算概论（A）/基础编程练习1(8题)/1:大象喝水
#include<stdio.h> int main() { ; // n < 100 scanf("%d", &n); // 循环遍历判断 再进行平方和 ...
- 使用splash爬去JavaScript动态请求的内容
https://blog.csdn.net/qq_32093267/article/details/78156184
- WINDOW 安装ImageMagick服务端和PHP的imagick插件
写在最前: windows下要注意的就是ImageMagick版本要与php扩展的Imagick能对应上,同时Imagick版本的选择也要与服务器环境以及php的情况对应上,不然就容易安装失败,我就是 ...
- Mybatis的Mapper接口方法不能重载
今天给项目的数据字典查询添加通用方法,发现里边已经有了一个查询所有数据字典的方法 List<Dict> selectDictList(); 但我想设置的方法是根据数据字典的code查询出所 ...
- JVM垃圾回收算法及分代垃圾收集器
一.垃圾收集器的分类 1.次收集器 Scavenge GC,指发生在新生代的GC,因为新生代的Java对象大多都是朝生夕死,所以Scavenge GC非常频繁,一般回收速度也比较快.当Eden空间不足 ...
- java泛型中<?>和<T>区别
public static void printColl(ArrayList<?> al){ Iterator<?> it = al.iterat ...