CSS3 动画 cheatsheet
Transition
实例
.box {
height: 100px;
width: 100px;
background: #212121;
transition: width 1s ease, height 2s ease 1s;
}
.box:hover {
height: 200px;
width: 200px;
}
参数
- transition-property
- transition-duration
- transition-timing-function(可以 定制)
- transition-delay
js 触发
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box {
height: 100px;
width: 100px;
background: #212121;
transition: width 1s ease, height 2s ease 1s;
}
.larger {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
setTimeout(() => {
document.querySelector('.box').classList.add('larger')
}, 500)
</script>
</body>
</html>
使用注意和局限
- 不是所有的 CSS 属性都支持 transition,完整列表 & 具体效果
- transition 需要明确知道开始状态和结束状态的具体数值
- transition 需要事件触发(上面例子中的 hover 或者动态添加 class),其实质是元素属性的改变,而该属性定义过 transition
- transition 是一次性的,不能重复发生,除非一再触发
- transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态
Animation
实例
.box {
height: 100px;
width: 100px;
background: #212121;
}
@keyframes larger {
50% {
height: 200px;
width: 100px;
}
100% {
height: 200px;
width: 200px;
}
}
.box:hover {
/* CSS Animation 需要指定动画一个周期持续的时间,以及动画效果的名称 */
animation: 2s larger;
}
参数
- animation-iteration-count(动画播放次数,可以取值 1, 2, 3... 或者 infinite)
- animation-fill-mode(动画结束,会立即从结束状态跳回到开始状态,可以取值 forwards 使之保留在结束状态)
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-direction(规定动画是否在下一周期逆向地播放。默认是 "normal"。)
- animation-play-state(如果想让动画保持突然终止时的状态,就要使用 animation-play-state 属性。)
js 触发
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box {
height: 100px;
width: 100px;
background: #212121;
}
@keyframes larger {
50% {
height: 200px;
width: 100px;
}
100% {
height: 200px;
width: 200px;
}
}
.larger {
animation: 2s larger forwards;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
setTimeout(() => {
document.querySelector('.box').classList.add('larger')
}, 1000)
</script>
</body>
</html>
连续的动画
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box {
height: 100px;
width: 100px;
background: #212121;
animation:
1s higher forwards,
1s 1s wider forwards;
}
@keyframes higher {
50% {
height: 100px;
}
100% {
height: 200px;
}
}
@keyframes wider {
50% {
width: 100px;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
如果连续的动画是作用在同一个元素上,其实完全可以写在一个 animation 里。
CSS3 动画 cheatsheet的更多相关文章
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- MyBatis动态代理
一.项目结构 二.代码实现 import java.util.List; import java.util.Map; import com.jmu.bean.Student; public inter ...
- springMVC(3)---利用pdf模板下载
springMVC(3)---利用pdf模板下载 在实际开发中,很多时候需要通过把数据库中的数据添加到pdf模板中,然后供客户下载,那我们该如何中呢? 本文主要内容是:用java在pdf模板中加入数据 ...
- mac下通过mdfind命令搜索文件
mdfind命令就是Spotlight功能的终端界面,这意味着如果Spotlight被禁用,mdfind命令也将无法工作.mdfind命令非常迅速.高效.最基本的使用方法是: mdfind -name ...
- CPU31X-2DP通过DP网络连接远程IO站
一.远程IO站介绍 二.该DP网络系统结构 三.组态DP主站 1.组态机架硬件配置 2.设置profibus属性,主站地址为2,如下图 3.完成主站组态 四.组态远程IO从站ET200M 1.接口模块 ...
- C语言位操作的算法
1.头文件 #ifndef _INC_BITOPERATION #define _INC_BITOPERATION #endif /* 封装了所有的位操作运算 */ #include<stdio ...
- Linux Centos 使用 yum 安装java
centos 使用 yum 安装java 首先,在你的服务器上运行一下更新. yum update 然后,在您的系统上搜索,任何版本的已安装的JDK组件. rpm -qa | grep -E '^op ...
- 阿里云服务器 ubuntu14.04 配置ftp
1.执行apt-get update 2.使用apt-get命令安装vsftp:apt-get install vsftpd -y 3.先检查一下nologin的位置,通常在/usr/sbin/nol ...
- 给yii架构的网站做Android客户端
网站未预留接口.给这类网站制作客户端就是模拟网页发送的post和get请求,然后获取服务器返回的数据. 1.在做客户端时先使用httpwatch分析浏览器发送的get和post请求的内容和URL.分析 ...
- angular4——安装
本文同样适用于NG4,最近开始学ng2了,前端小白一枚啊,做过安卓开发,做过java写的服务器啊,热爱前端啊,所以就开坑了,入坑之前建议先学下es6哦,学完后看下typescript哦,正所谓,前面基 ...
- opensuse安装pycurl失败记录
早上在opensuse安装pycurl,一直出现如下错误: pepper@VM_56_243_suse:~/code/gitosis-autotest> pip install pycurl C ...