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. response与request回顾学习

    一.response response是servlet.service方法的一个参数,它的类型是javax.servlet.http.HttpServletResponse,在客户端每发出一个请求时, ...

  2. 小白的Python之路 day4 装饰器高潮

    首先装饰器实现的条件: 高阶函数+嵌套函数 =>装饰器 1.首先,我们先定义一个高级函数,去装饰test1函数,得不到我们想要的操作方式 import time #定义高阶函数 def deco ...

  3. xamarin android menu的用法

    在Android中的菜单有如下几种: OptionMenu:选项菜单,android中最常见的菜单,通过Menu键来调用 SubMenu:子菜单,android中点击子菜单将弹出一个显示子菜单项的悬浮 ...

  4. ES6 正则的扩展

    1. RegExp构造函数 ES5中,RegExp构造函数的参数: 参数是字符串,这时第二个参数表示正则表达式的修饰符(flag) 参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝.但是,ES ...

  5. Prism for WPF再探（基于Prism事件的模块间通信）

    上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...

  6. vue常见错误及解决办法

    1.在配置路由并引入组件后,报错: Unknown custom element: <router-link> - did you register the component corre ...

  7. 根据图片的路径（绝对路径/相对路径都可以），生成base64的

    根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. python如何进行内存管理

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的 ...

  9. Android 执行 adb shell 命令

    Android 执行Adb shell 命令大多需要root权限,Android自带的Runtime. getRuntime().exec()容易出错,在网上找到了一个执行adb shell命令的类 ...

  10. SQLServer：无法生成 SSPI 上下文(Cannot generate SSPI context)

    服务器版本:windows Server 2012 R2 数据库版本: SQLServer 2016 +sp1 SQL2016AlwaysOn群集: 由于重启过域控,造成后续的部分服务器也解析不到DN ...