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. 杭电1596find the safest road（spfa）

    find the safest road Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  2. VC编码规范（转）

    1    项目风格   1.1    项目取名     在VC之中,项目名为最后可执行文件名,所以项目名最好以最终的可执行文件名一致. 1.2    项目目录设置     为保证VC项目的备份方便.快 ...

  3. STM32唯一身份识别ID（器件电子签名）的读取以及芯片Flash大小读取

    每个STM32有一个独立的ID,这个ID可以用来: 产品唯一的身份标识的作用:    ●  用来作为序列号(例如USB字符序列号或者其他的终端应用):    ●  用来作为密码,在编写闪存时,将此唯一 ...

  4. cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

    cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

  5. 通达OA二次开发 工作流表单中关联查询另外一个工作流方法（源代码）

    一个工作流表单中,怎样方便的查询相关的工作流表单内容.重复打开各个菜单必定须要造成多次点击浪费时间,切换也会带来思路的中断.这里通过js代码的方式把这个问题进行了解决. <style>&l ...

  6. C# 给窗体添加事件

    1.https://zhidao.baidu.com/question/588485101.html

  7. YTU 2442: C++习题 矩阵求和--重载运算符

    2442: C++习题 矩阵求和--重载运算符 时间限制: 1 Sec  内存限制: 128 MB 提交: 1457  解决: 565 题目描述 有两个矩阵a和b,均为2行3列.求两个矩阵之和.重载运 ...

  8. codeforces 460B Little Dima and Equation 解题报告

    题目链接:http://codeforces.com/problemset/problem/460/B 题目意思:给出a, b, c三个数,要你找出所有在 1 ≤ x ≤ 1e9 范围内满足 x =  ...

  9. CQOI2013 新数独

    传送门 这道题也是很暴力的搜索啊…… 因为数独一开始全是空的,只有许许多多的大小限制条件,那也没必要纠结从哪开始搜索了,直接暴力搜索之后判断一下是否合法. 这题最恶心的是读入.现学了一招判断点在哪个块 ...

  10. HTML 新属性

    accesskey 属性 -- 代表链接的快捷键访问方式 定义了accesskey的链接可以使用快捷键(ALT+字母)访问. 主菜单与导航菜单使用accesskey,通常是不错的选择. 取值: 字母 ...