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. F01:金融学第一定律：时间的价值

    很小的时候,我们就听大人们讲过:时间就是金钱. 长大了,也觉得这句话应该是对的.我们很珍惜时间,但是似乎没有看到金钱的急剧增加啊.总之,这是模糊,体验感又不强的一句话. 既然谈到时间的价值,价值最容易 ...

  2. 初装Ubuntu一般配置

    1. 开启ssh远程 2.修改root密码 sudo passwd 输入两次密码. 3.授权普通用户root权限 修改 /etc/sudoers 文件,找到下面一行,在root下面添加一行,如下所示: ...

  3. Python爬虫Scrapy(二)_入门案例

    本章将从案例开始介绍python scrapy框架,更多内容请参考:python学习指南 入门案例 学习目标 创建一个Scrapy项目 定义提取的结构化数据(Item) 编写爬取网站的Spider并提 ...

  4. 随聊——Python的前世今生

    1989年圣诞节前夕,山雨欲来风满楼,计算机程序设计语言界隐隐有大事要发生,果然不出所料.江湖人称龟叔(Guido von Rossum),就是这位祖籍荷兰的大能,在圣诞节百无聊赖的期间,发明了Pyt ...

  5. C#应用程序隐藏调用bat脚本

    做c#应用程序有些调用windows自带的bat脚本会比较方便 Process proc; proc = null; try { string targetDir = GetParentUrl() + ...

  6. IOC容器在web容器中初始化过程——（二）深入理解Listener方式装载IOC容器方式

    先来看一下ContextServletListener的代码 public class ContextLoaderListener extends ContextLoader implements S ...

  7. 使用canvas实现绚丽的时钟特效

    源码 https://github.com/2016Messi/Gorgeous-clock 效果展示 https://2016messi.github.io/Gorgeous-clock/ 如果各位 ...

  8. free查看内存和swap使用情况，增加、删除、自动挂载swap分区

    free [root@localhost ~]# free total used free shared buff/cache available Mem: 999936 142760 566536 ...

  9. iOS PickerView选择视图

    原文demo: @interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource> { UIPickerVi ...

  10. 通过C#来开启、关闭、重启Windows服务

    通过C#开启服务需要这个C#程序有相应权限,比如服务的账户是Local System的就必须以管理员权限运行C#程序才能开启或关闭. 这里只写重启的方式(就是先关闭,后开启): // Security ...