Transition

实例

  1. .box {
  2. height: 100px;
  3. width: 100px;
  4. background: #212121;
  5. transition: width 1s ease, height 2s ease 1s;
  6. }
  7. .box:hover {
  8. height: 200px;
  9. width: 200px;
  10. }

参数

  • transition-property
  • transition-duration
  • transition-timing-function(可以 定制
  • transition-delay

js 触发

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. .box {
  7. height: 100px;
  8. width: 100px;
  9. background: #212121;
  10. transition: width 1s ease, height 2s ease 1s;
  11. }
  12. .larger {
  13. width: 200px;
  14. height: 200px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="box"></div>
  20. <script type="text/javascript">
  21. setTimeout(() => {
  22. document.querySelector('.box').classList.add('larger')
  23. }, 500)
  24. </script>
  25. </body>
  26. </html>

使用注意和局限

  • 不是所有的 CSS 属性都支持 transition,完整列表 & 具体效果
  • transition 需要明确知道开始状态和结束状态的具体数值
  • transition 需要事件触发(上面例子中的 hover 或者动态添加 class),其实质是元素属性的改变,而该属性定义过 transition
  • transition 是一次性的,不能重复发生,除非一再触发
  • transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态

Animation

实例

  1. .box {
  2. height: 100px;
  3. width: 100px;
  4. background: #212121;
  5. }
  6. @keyframes larger {
  7. 50% {
  8. height: 200px;
  9. width: 100px;
  10. }
  11. 100% {
  12. height: 200px;
  13. width: 200px;
  14. }
  15. }
  16. .box:hover {
  17. /* CSS Animation 需要指定动画一个周期持续的时间,以及动画效果的名称 */
  18. animation: 2s larger;
  19. }

参数

  • 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 触发

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. .box {
  7. height: 100px;
  8. width: 100px;
  9. background: #212121;
  10. }
  11. @keyframes larger {
  12. 50% {
  13. height: 200px;
  14. width: 100px;
  15. }
  16. 100% {
  17. height: 200px;
  18. width: 200px;
  19. }
  20. }
  21. .larger {
  22. animation: 2s larger forwards;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="box"></div>
  28. <script type="text/javascript">
  29. setTimeout(() => {
  30. document.querySelector('.box').classList.add('larger')
  31. }, 1000)
  32. </script>
  33. </body>
  34. </html>

连续的动画

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. .box {
  7. height: 100px;
  8. width: 100px;
  9. background: #212121;
  10. animation:
  11. 1s higher forwards,
  12. 1s 1s wider forwards;
  13. }
  14. @keyframes higher {
  15. 50% {
  16. height: 100px;
  17. }
  18. 100% {
  19. height: 200px;
  20. }
  21. }
  22. @keyframes wider {
  23. 50% {
  24. width: 100px;
  25. }
  26. 100% {
  27. width: 200px;
  28. }
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="box"></div>
  34. </body>
  35. </html>

如果连续的动画是作用在同一个元素上,其实完全可以写在一个 animation 里。

CSS3 动画 cheatsheet的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. MyBatis动态代理

    一.项目结构 二.代码实现 import java.util.List; import java.util.Map; import com.jmu.bean.Student; public inter ...

  2. springMVC(3)---利用pdf模板下载

    springMVC(3)---利用pdf模板下载 在实际开发中,很多时候需要通过把数据库中的数据添加到pdf模板中,然后供客户下载,那我们该如何中呢? 本文主要内容是:用java在pdf模板中加入数据 ...

  3. mac下通过mdfind命令搜索文件

    mdfind命令就是Spotlight功能的终端界面,这意味着如果Spotlight被禁用,mdfind命令也将无法工作.mdfind命令非常迅速.高效.最基本的使用方法是: mdfind -name ...

  4. CPU31X-2DP通过DP网络连接远程IO站

    一.远程IO站介绍 二.该DP网络系统结构 三.组态DP主站 1.组态机架硬件配置 2.设置profibus属性,主站地址为2,如下图 3.完成主站组态 四.组态远程IO从站ET200M 1.接口模块 ...

  5. C语言位操作的算法

    1.头文件 #ifndef _INC_BITOPERATION #define _INC_BITOPERATION #endif /* 封装了所有的位操作运算 */ #include<stdio ...

  6. Linux Centos 使用 yum 安装java

    centos 使用 yum 安装java 首先,在你的服务器上运行一下更新. yum update 然后,在您的系统上搜索,任何版本的已安装的JDK组件. rpm -qa | grep -E '^op ...

  7. 阿里云服务器 ubuntu14.04 配置ftp

    1.执行apt-get update 2.使用apt-get命令安装vsftp:apt-get install vsftpd -y 3.先检查一下nologin的位置,通常在/usr/sbin/nol ...

  8. 给yii架构的网站做Android客户端

    网站未预留接口.给这类网站制作客户端就是模拟网页发送的post和get请求,然后获取服务器返回的数据. 1.在做客户端时先使用httpwatch分析浏览器发送的get和post请求的内容和URL.分析 ...

  9. angular4——安装

    本文同样适用于NG4,最近开始学ng2了,前端小白一枚啊,做过安卓开发,做过java写的服务器啊,热爱前端啊,所以就开坑了,入坑之前建议先学下es6哦,学完后看下typescript哦,正所谓,前面基 ...

  10. opensuse安装pycurl失败记录

    早上在opensuse安装pycurl,一直出现如下错误: pepper@VM_56_243_suse:~/code/gitosis-autotest> pip install pycurl C ...