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的更多相关文章

  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. java多线程编程核心技术——第六章总结

    目录 1.0立即加载/"饿汉式" 2.0延迟加载/"懒汉式" 3.0使用静态内置类实现单例模式 4.0序列化与反序列化的单例模式实现 5.0使用static代码 ...

  2. Docker for Windows 使用入门

    欢迎来到Docker for Windows! Docker是用于创建Docker应用程序的完整开发平台,Docker for Windows是在Windows系统上开始使用Docker的最佳方式. ...

  3. 自学Zabbix3.9.3-模板Templates-嵌套Nesting

    自学Zabbix3.9.3-模板Templates-嵌套Nesting 嵌套是一个模板包含一个或多个其他模板的方法.可以在一个"嵌套"模板中将一些模板链接在一起.嵌套的好处在于,只 ...

  4. 获取AJAX加载的内容

    1.有些网页内容使用AJAX加载,AJAX一般返回的是JSON,直接对AJAX地址进行post或get,就返回JSON数据了. 2.用抓包工具分析https://movie.douban.com/j/ ...

  5. redis的list类型

    1.简单介绍 redis的list类型其实就是一个每个元素都是string类型的双向链表.所以lpush.rpush.lpop和rpop命令的时间复杂度是O(1),list会记录链表的长度,所以lle ...

  6. Idea在导入有maven项目时，不能自动识别pom.xml

    当在idea中导入maven项目时,不能自动识别pom文件,显示为普通橙色xml文件. 解决方法:点击最右侧侧边栏,点击添加(蓝的的小加号),选择你导入项目的pom.xml文件

  7. IDEA配置jdk

    提前安装jdk,配置环境变量 一.配置jdk 1.依次点开File -->Project Structure,点击左侧标签页,点击SDKs 2.点击+号,选SDK 3.按照这个顺序,可以配置多个 ...

  8. SLAM入门之视觉里程计(2)：相机模型（内参数，外参数）

    相机成像的过程实际是将真实的三维空间中的三维点映射到成像平面(二维空间)过程,可以简单的使用小孔成像模型来描述该过程,以了解成像过程中三维空间到二位图像空间的变换过程. 本文包含两部分内容,首先介绍小 ...

  9. Spark Streaming VS Flink Streaming

    引自:https://www.slideshare.net/datamantra/introduction-to-flink-streaming

  10. Sphinx学习笔记（一）

    最近负责一个项目,需要用到全文检索,我的环境大体如下:       1.数据保存在MySQL中     2.需要支持中文检索     3.尽可能的简单       选择了Sphinx,至于solr和E ...