Transition

实例

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

参数

  • 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.     }
  13.     .larger {
  14.       width: 200px;
  15.       height: 200px;
  16.     }
  17.   </style>
  18. </head>
  19. <body>
  20. <div class="box"></div>
  21. <script type="text/javascript">
  22.   setTimeout(() => {
  23.     document.querySelector('.box').classList.add('larger')
  24.   }, 500)
  25. </script>
  26. </body>
  27. </html>

使用注意和局限

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

Animation

实例

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

参数

  • 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.     }
  12.     @keyframes larger {
  13.       50% {
  14.         height: 200px;
  15.         width: 100px;
  16.       }
  18.       100% {
  19.         height: 200px;
  20.         width: 200px;
  21.       }
  22.     }
  24.     .larger {
  25.       animation: 2s larger forwards;
  26.     }
  27.   </style>
  28. </head>
  29. <body>
  30. <div class="box"></div>
  31. <script type="text/javascript">
  32.   setTimeout(() => {
  33.     document.querySelector('.box').classList.add('larger')
  34.   }, 1000)
  35. </script>
  36. </body>
  37. </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.     }
  15.     @keyframes higher {
  16.       50% {
  17.         height: 100px;
  18.       }
  20.       100% {
  21.         height: 200px;
  22.       }
  23.     }
  25.     @keyframes wider {
  26.       50% {
  27.         width: 100px;
  28.       }
  30.       100% {
  31.         width: 200px;
  32.       }
  33.     }
  34.   </style>
  35. </head>
  36. <body>
  37. <div class="box"></div>
  38. </body>
  39. </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 ...