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. python+appium+unittest自动化测试框架环境搭建

    一.基础软件准备 1.python 版本最新版本,python的IDE使用pycharm.具体的下载链接: python https://www.python.org/ pycharm:https:/ ...

  2. SQL语句 insert into 语句的写法

    方式1: INSERT INTO t1(field1,field2) VALUE('001','002'); 最好的做法明确插入的每一列,列于查错,而且漏列的几率会降低! 方式2: INSERT IN ...

  3. java语言实现树

    首先用Node类定义一个节点,用来存储每个节点的内容: public class Node { // 关键字 private int keyData; // 其他数据 private int othe ...

  4. 百度地图点集文档使用python的re模块处理成json的相关写法

    这个实在不好起名字.写这个还不是因为被渣度坑的不要不要的.为什么说他坑呢.参考一下这两个截图的txt文档: 文档资源下载地址:  http://lbsyun.baidu.com/index.php?t ...

  5. python文件操作及os模块常用命令

    1.文件打开 文件句柄 = open('文件路径', '模式') 2.文件操作 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 三种基本 ...

  6. 原生JS的Ajax

    转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象 非IE6浏览器:var obj = new XMLHttpReuqest() ...

  7. 中文颜色名称与RGB颜色对照表

    中文颜色名称颜色对照表 鸨色 #f7acbc 赤白橡 #deab8a 油色 #817936 绀桔梗 #444693 踯躅色 #ef5b9c 肌色 #fedcbd 伽罗色 #7f7522 花色 #2b4 ...

  8. 【java】多线程同步死锁

    package 多线程; class A{ public synchronized void say(B b){ System.out.println("A说:你把你的本给我,我把我的笔给你 ...

  9. 【java】io流之字符输入流：java.io.Reader类及子类的子类java.io.FileReader

    package 文件操作; import java.io.File; import java.io.FileReader; import java.io.IOException; import jav ...

  10. BGP网络学习总结

    1.前言     云计算在中国发展越来越快,企业逐步开始将业务迁移到公有云中,方便运维,节省成本.公有云最复杂的地方是网络,客户对网络的需求千奇百怪,造成网络环境极其复杂,稍有不慎,就会出现网络连通性 ...