一、使用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动画实现弹窗就完成啦。

我们接下来看第二个案例:轮播图。这个案例比较简单

实现思路:

  1. 定义一个父级,规定宽度和高度只能显示一个轮播图大小,超出部分隐藏
//html
<div class="carousel"></div> //css
.carousel{
width:100px;
height:100px;
overflow: hidden;
}
  1. 定义存放所有轮播图的盒子
//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; //定义动画相关属性
}
  1. 定义动画
//通过不断改变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动画详解(结合实例)的更多相关文章

  1. css3学习--css3动画详解一(animation属性)

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  2. css3动画详解

    一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一 ...

  3. CSS3动画详解(超详细)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  4. CSS3动画详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  5. css3学习--css3动画详解二(3d效果)

    一.设置3D场景 perspective:800       //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴)    //视点的位置 transf ...

  6. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  7. [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  8. [转] ReactNative Animated动画详解

    http://web.jobbole.com/84962/     首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...

  9. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

随机推荐

  1. idea下导入Tomcat源码

    对于web开发者来说,如果明白了tomcat那对于开发还是后面的学习都是有很大益处的,但在网上看了很多的文章,总是没弄好,经历了很久才弄好了,写个文章记录下,希望也能帮助到其他人.下载Tomcat源码 ...

  2. 编写一个JavaWeb项目

    基本流程:JSP文件显示页面,在前端页面输入赋值,使用form或href超链接传值到Servlet中方法,在Servlet方法中调用Dao层的类对象,将数据传到数据库中,并实现对数据库里的数据的增删改 ...

  3. Spring MVC前传递和后端接收的参数名不一致处理方式

    前端传递的变量和后端接收的变量名字不一致时,用注解@RequestParam来实现数据的传递 例如:@RequestParam(value="id") //实现商品的分类目录展现 ...

  4. JDBC的DBUtils源码

    DBUtils源码: package com.it.util; import java.sql.Connection; import java.sql.DriverManager; import ja ...

  5. 再论sklearn分类器

    https://www.cnblogs.com/hhh5460/p/5132203.html 这几天在看 sklearn 的文档,发现他的分类器有很多,这里做一些简略的记录. 大致可以将这些分类器分成 ...

  6. amoeba_mysql 读写分离

    环境 amoeba需要java环境,配置:略. MySQL主从配置:略. 基本架构 MySQL主:192.168.31.140 MySQL从:192.168.31.150 MySQL代理:192.16 ...

  7. GO语言学习笔记之Linux环境下安装GO语言

    0x00 安装环境和GO版本 本篇是源码安装,非使用包管理工具安装. # Centos 7.4 # GO v1.11.2 0x01 下载GO安装包 # wget https://dl.google.c ...

  8. FJOI2019游记

    应该是.....尽力了吧 day0:下午到酒店,晚上魔兽(with lyc)+雀魂.心里也清楚,今年只是来观光的. day1:上午暴力打完走人.下午和晚上魔兽+雀魂+300. day2:暴力打到一半拉 ...

  9. es修改数据类型

    环境:es版本:6.5.0 es创建好了mapping后是不允许修改字段类型的,要是我们想修改字段类型怎么办呢,我们可以采用reindex的方法实现,就是创建一个新的mapping,里面的字段类型按照 ...

  10. metasploit(MSF)对windows的ms17-010漏洞利用

    picture 配置exploit msf > use exploit/windows/smb/ms17_010_eternalblue msf exploit(windows/smb/ms17 ...