C3 Transitions, Transforms 以及 Animation总结

前言

昨天有人咨询我面试的注意事项, 突然就意识到自己这块非常差, 竟然没有任何的印象, 准备看着大神老师的博客, 学习一边, 以便以后有个了解和参考

  • 其中的例子都是用自己的方法实现的, 然后没有考虑任何兼容性, 只是单纯的熟悉下这些属性
  • 但是能保证每一个例子, 都是自己亲自测试的, 在我这跑着, 没得问题.

文章目录

  • Transition总结
  • Transforms总结
  • Animation总结
  • 总结效果展示
  • 浏览器支持情况
  • 延伸
  • 总结

Transitions

  • 平滑的改变CSS的值.
  • 只要属性的值改变了, 无论是点击事件,焦点事件,还是鼠标的hover事件, 只要是值改变了, 就是平滑的, 就是动画

具体属性

  • transition-property:* 指定过渡的性质. 例如: transition-property: background指的是background参与到这个过渡
  • transition-duration:* 指定这个过渡的持续时间
  • transition-delay:* 延迟过渡时间
  • transition-timing-function:* 指定过渡类型, 有ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier

简单举例

  <style>

    .trans {

      -webkit-transition-property: background-color;

      -webkit-transition-duration: 3s;

      -webkit-transition-timing-function: ease;

    }

    .trans:hover {

      background-color: #486AAA;

      color: #fff;

    }

  </style>

</head>

<body>

  <p class="trans">经过出现效果</p>

</body>

合并属性

  <style>

    .trans {

      transition: background-color 3s 0.5s ease;

      -webkit-transition: background-color 3s 0.5s ease;

      -moz-transition: background-color 3s 0.5s ease;

      -o-transition: background-color 3s 0.5s ease;

      -ms-transition: background-color 3s 0.5s ease;

    }

    .trans:hover {

      background-color: #486AAA;

      color: #fff;

    }

  </style>

transition-timing-function详解

  • linear: 线性变换, 始终如一
  • ease-in: 进去的时候, 先慢后快
  • ease-out: 出来的时候, 先快后慢
  • ease-in-out: 完整过程, 先慢, 再快, 再慢
  • cubic-bezier: 贝塞尔曲线, 这就牛逼了

Transform总结

transform指变换, 指的是拉伸, 压缩, 旋转, 偏移, 旋转四种变换.

  • transform: skew(35deg) : 拉伸
  • transform: scale(1, 0.5) : 压缩
  • transform: rotate(45deg) : 旋转
  • transform: translate(10px, 20px): 偏移

举例:

  <style>

    div {

      width: 100px;

      height: 100px;

      background: #aaa;

    }

    .trans_skew {

      transform: skew(35deg);

    }

    .trans_scale {

      transform: scale(0.5, 0.5);

    }

    .trans_rotate {

      transform: rotate(45deg)

    }

    .trans_translate {

      transform: translate(100px, 50px);

    }

  </style>

<body>

  <div>原版</div>

  <div class="trans_skew">skew</div>

  <div class="trans_scale">sclate</div>

  <div class="trans_rotate">rotate</div>

  <div class="trans_translate">translate</div>

</body>

动态效果

  <style>

    div {

      width: 100px;

      height: 100px;

      background: #aaa;

      transition: all 2s;

    }

    .transtion_all:hover {

      transform: translate(10deg, 20px);

    }

  </style>

<body>

  <div class="transtion_all">原版</div>

</body>

Animations总结

各个属性值

  • animation-name: 对应的选择器keyframe的名称
  • animation-duration: 动画所花费的时间.
  • animation-fiming-fuction: 动画的曲线速度
  • animation-delay: 动画开始之前的延时
  • animation-iteration-count: 动画应该播放的次数
  • animation-direction: 规定是否播放轮流反向动画
    • normal: 默认值, 动画应该正常播放
    • alternate: 动画应该轮流反向播放

举例01

  <style>

    div {

      width: 200px;

      height: 100px;

      background: #aaa;

    }

    /* 定义动画 */

    @-webkit-keyframes myAimation {

      0% {

        padding: 0;

      }

      50% {

        padding: 20px;

      }

      100% {

        padding: 100px;

      }

    }

    .animations_show:hover {

      -webkit-animation-name: myAimation;

      -webkit-animation-duration: 1.5s;

      -webkit-animation-iteration-count: 4;

      -webkit-animation-direction: alternate;

      -webkit-animation-timing-function: ease-in-out;

    }

  </style>

<body>

  <div class="animations_show">animation-box</div>

</body>

举例02

  <style>

    img {

      box-shadow: 0 0 8px;

    }

    img:hover {

      animation-name: anim;

      animation-duration: 2s;

    }

    @keyframes anim {

      0% {

        box-shadow: 0 0 8px;

      }

      20% {

        box-shadow: 0px 0px 20px;

      }

      100% {

        box-shadow: 0 0 8px;

      }

    }

  </style>

<body>

  <img src="./test.jpg" alt="">

</body

综合案例

01

  <style>

    img {

      width: 100px;

      height: 120px;

      position: absolute;

      transition: opacity 1s ease-in-out;

      /* opacity: 0; */

    }

    img:hover {

      /* 因为我们hover上面的时候, 只能hover上面的img, 然后上面的img透明度变成了完全透明, 然后下面的图片就显示出来了 */

      opacity: 0;

      /* filter: 定义元素的可视效果,  */

      /* filter: alpha(opacity=0); */

    }

  </style>

<body>

  <img src="./test.jpg" alt="">

  <img src="./yuanjihuasy.png" alt="">

</body>

02

借助JS实现点击切换

  <style>

    img {

      width: 100px;

      height: 120px;

      position: absolute;

      transition: opacity 1s ease-in-out;

    }

    .img_click {

      opacity: 0;

    }

  </style>

<body>

  <img src="./test.jpg" alt="">

  <img src="./yuanjihuasy.png" alt="">

  <script>

    (function () {

      var images = document.getElementsByTagName('img')

      images[1].onclick = function () {

        this.classList.toggle('img_click')

      }

    })()

  </script>

</body>

03

图片无限自动变化

  <style>

    img {

      width: 100px;

      height: 120px;

    }

    img:hover {

      position: absolute;

      animation-name: fadeInOut;

      animation-duration: 5s;

      /* 此时我们的动画次数变成了无限次执行 */

      animation-iteration-count: infinite;

    }

    @-webkit-keyframes fadeInOut {

      0% {

        opacity: 1;

      }

      25% {

        opacity: 0;

      }

      50% {

        opacity: 0;

      }

      100% {

        opacity: 1;

      }

    }

  </style>

<body>

  <img src="./test.jpg" alt="">

</body>

04

两张图片轮流切换

  <style>

    img {

      width: 100px;

      height: 120px;

      transition: all 1s ease-in-out;

    }

    .img-box {

      background: #aaa;

    }

    .top {

      position: absolute;

      transform: scale(0, 0);

      opacity: 0;

      transform-origin: top right;

      -webkit-transform-origin: top right;

    }

    .img-box:hover .top {

      opacity: 1;

      transform: scale(1, 1);

    }

    .img-box:hover .bottom {

      opacity: 0;

      transform: scale(0, 0);

      transform-origin: bottom left;

      -webkit-transform-origin: bottom left;

    }

  </style>

<body>

  <div class="img-box">

    <img class="top" src="./test.jpg" alt="">

    <img class="bottom" src="./yuanjihuasy.png" alt="">

  </div>

</body>

05

  <style>

    img {

      width: 100px;

      height: 120px;

      transition: all 1s ease-in-out;

    }

    .top {

      position: absolute;

    }

    .img-box:hover .top{

      transform: scale(0, 0) rotate(360deg);

      opacity: 0;

    }

    .bottom {

      transform: scale(1, 0);

      opacity: 0;

    }

    .img-box:hover .bottom {

      opacity: 1;

      transform: scale(1, 1);

    }

  </style>

<body>

  <div class="img-box">

    <img src="./yuanjihuasy.png" alt="" class="top" >

    <img src="./test.jpg" alt="" class="bottom">

  </div>

</body>

06

选项卡案例

  <style>

    .img-box-outer {

      width: 100px;

      height: 120px;

      overflow: hidden;

    }

    .img-box {

      width: 400px;

      height: 120px;

      transition: all 1s ease-in-out;

    }

    img {

      float: left;

      width: 100px;

      height: 120px;

    }

    li:hover {

      background: #aaa;

      cursor: pointer;

    }

  </style>

<body>

  <div class="img-box-outer">

    <div class="img-box">

      <img src="./yuanjihuasy.png">

      <img src="./test.jpg">

      <img src="./header.jpg">

      <img src="./flower.jpg">

    </div>

  </div>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

  </ul>

  <script>

    onload = function () {

      var imgBox = document.getElementsByClassName('img-box')[0],

      triggers = document.getElementsByTagName('li'),

      triggersLength = triggers.length

      for (let i = 0; i < triggersLength; i++) {

        triggers[i].onclick = function () {

          let index = Number(this.innerText)

          imgBox.style.marginLeft = (1 - index) * 100 + 'px';

          return false

        }

      }

    }

  </script>

</body>

07

手风琴的一个案例

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .outer {

      height: 30px;

      overflow: hidden;

      transition: height 1s ease-in-out;

    }

    .outer:nth-child(1) {

      height: 180px;

    }

    h3 {

      height: 30px;

      background: skyblue;

    }

    p {

      height: 150px;

      background: #aaa;

    }

  </style>

<body>

  <div class="outer">

    <h3>1</h3>

    <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>

  </div>

  <div class="outer">

    <h3>2</h3>

    <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>

  </div>

  <div class="outer">

    <h3>3</h3>

    <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>

  </div>

  <script>

    // 获取所有的标题

    onload = () => {

      const outerArr = document.querySelectorAll('.outer')

      const hArr = document.querySelectorAll('h3')

      // 默认动画没有执行

      let transing = false

      Array.prototype.forEach.call(hArr, (element) => {

        let _this = element

        element.addEventListener('click', () => {

          if (transing) return

          let currentIndex = Number(_this.innerText) - 1

          // 动画开始执行

          transing = true

          Array.prototype.forEach.call(outerArr, (outer, index) => {

            if (currentIndex === index) {

              outer.style.height = '180px'

            } else {

              outer.style.height = '30px'

            }

          })

        }, false)

      })

      Array.prototype.forEach.call(outerArr, (outer, index) => {

        // 动画执行结束

        outer.addEventListener('transitionend', () => {

          transing = false

        })

      })

    }

  </script>

</body>

大神传送门: 张鑫旭大神的博客原文

C3 Transitions, Transforms 以及 Animation总结的更多相关文章

  1. CSS3 Transitions, Transforms和Animation使用简介与应用展示

    CSS3 Transitions, Transforms和Animation使用简介与应用展示 by zhangxinxu from http://www.zhangxinxu.com本文地址:htt ...

  2. CSS3 Transitions, Transforms和Animation的使用

    一.前言 CSS3动画相关的几个属性是:transition, transform, animation:分别理解为过渡,变换,动画.虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异. t ...

  3. 【转载】CSS3 Transitions, Transforms和Animation使用简介与应用展示

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=1 ...

  4. IE10开始支持CSS3 Transitions, Transforms 和 Animations

    这是一个好消息,微软公开说明IE10预览版已经支持CSS3属性 Transitions, Transforms 和 Animations,你可以直接写transitions,而不是加个恶心的前缀-ms ...

  5. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  6. CSS3动画总结学习(一)

    参考文章: CSS3 Transitions, Transforms和Animation使用简介与应用展示 CSS 参考手册 动画的分类 平移动画 transform: 就是变换, 变换, 变换 也就 ...

  7. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  8. css3新特性

    1.css3选择器   我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: Body > .mainTabContainer div > s ...

  9. CSS/CSS3长度、时间、频率、角度单位大全

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1494 一.一笔带过的 ...

随机推荐

  1. 文件宝局域网传输/播放功能使用帮助(Windows电脑用户)

    使用局域网账户密码登录,可以访问电脑上所有文件 使用游客无账户密码登录,只能访问电脑上指定共享文件夹的文件. 1.怎么设置共享文件夹请参考: 方法1 1.在文件资源管理器中选择自己一个想共享的文件夹, ...

  2. CentOS笔记-其他杂记

    1.忘记密码时,可以用single模式来修改密码,为了安全,可以禁用single模式,参考网址如下 Centos服务器禁止单用户模式(single)来增强系统安全 2.远程登录:ssh root@xx ...

  3. java的自定义异常类

    编写自定义异常类的模式 编写自定义异常类实际上是继承一个Exception标准异常类,用新定义的异常处理信息覆盖原有信息的过程.常用的编写自定义异常类的模式如下: public classCustom ...

  4. HDU1964 Pipes —— 插头DP

    题目链接:https://vjudge.net/problem/HDU-1964 Pipes Time Limit: 5000/1000 MS (Java/Others)    Memory Limi ...

  5. HDU 2036：改革春风吹满地

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  6. centos安装cowboy过程

    在centos机器上安装erlang: yum install erlang -y 接着把之前在ubuntu上的cowboy工程拷贝到centos机器上,进入到工程目录,输入: make run 提示 ...

  7. 实现自定义xib和storyboard的加载,

    一:加载xib 1.分别创建xib,.h  .m文件继承自UIView. 在xib上绑定类名. 或者创建文件的时候直接勾选xib 2.在控制器中调用类方法 jyq52787网盘/ios/潭州学院/iO ...

  8. 「LuoguP2014」 选课

    Description 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学 ...

  9. 【旧文章搬运】ZwQuerySystemInformation枚举进线程信息

    原文发表于百度空间,2008-10-15========================================================================== 很古老的东 ...

  10. 13_android实现多线程下载_界面实现

    进度条这个东西可以给它创建一个布局.进度条叫ProgressBar. ProgressBar这个就是进度条. 默认的安卓进度条是一个圈圈,一圈一圈转. 之前咱们把一个XML文件转化成一个View对象, ...