资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css动画 --- transition

css动画 --- transition

leoperfect / 3145人阅读

摘要：初探提供了一种在更改属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。轴的取值范围区间内轴可以任意值。动手使用下基本操作的里有，要触发它，则需要改变上面所说的。

前言

页面效果是很重要的一环，好的页面效果，可以让用户感觉很舒服，进而能吸引更多的用户。
既然是页面效果，那么动画肯定不可或缺，那么这篇先说下 transition 这个 css3 属性。

初探 transition 
transitions 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效  的。（摘自MDN）
用法

其写法（为了兼容，要加厂商前缀，这里不写咯）：

transition:

也可以用逗号隔开，多写几个作用于不用的 property（属性）

transition:    ,

各项作用
@ 值 默认值 作用
property none / all / property all 作用于需要过渡的属性
duration time 0 过渡所需时间
timing-function linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n) ease 规定过渡效果的速度曲线
delay time (同duration) 0 延迟多久才开始过渡

property：可过渡的 CSS 属性，有些属性则不行。

time：以秒（如1s）或毫秒（如1000）计。

cubic-bezier(x1,y1,x2,y2)：三阶贝塞尔曲线。linear ，ease 等等都是由它计算出来的。x轴 的取值范围：[0,1] 区间内, y轴 可以任意值。可在线自定义 。

动手使用下 基本操作 
// css
#box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
}

#box:hover {
  width: 500px;
  margin-top: 100px;
}

// html

#box的 style 里有transition，要触发它，则需要改变上面所说的 property 。

当鼠标移到 div 时，width 和 marin-top 发生了变化，触发了 transition 。

all ： 所有可过渡的属性都可以的意思。

1s ： 在第二项，即 duration 。过渡所需时间。

简单的类似图片无缝滑动 
// css
* {
  margin: 0;
  padding: 0;
}

#box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  overflow: hidden;
  
}

#img_container {
  position: relative;
  width: 400px;
  transition: all .7s linear;
  -webkit-transition: all .7s linear;
  -moz-transition: all .7s linear;
  -ms-transition: all .7s linear;
  -o-transition: all .7s linear;
}

#img_container span {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: yellow;
}

#img_container span:nth-of-type(even) {
  background-color: red;
}

ul {
  text-align: center;
}

li {
  padding: 10px;
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

// html


  

     1234
  




    
  
  • 图一
    • 
  
  • 图二
    • 
  
  • 图三
    • 
  
  • 图四
    • 



// js
~function () {
    let lis    = document.getElementsByTagName("li");
    let imgBox = document.getElementById("img_container");
    let width  = +document.querySelector("span").clientWidth;
    
    for (let j = 0;j < lis.length;j++) {
      
      lis[j].addEventListener("click",function() {
        imgBox.style.marginLeft = `-${ width * j }px`;
      });

    }

}()

这个 demo 是用 js 改变了 property ，从而触发 transition。

滚动到某个位置，动画才出现 
// css
* {
  margin: 0;
  padding: 0;
}

body {
  height: 1500px;
}


#box {
  height: 1200px;
  text-align: center;
}

#animation {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -webkit-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -moz-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -ms-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -o-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
}

// html


  请往下滚动到有动画的地方，或者点击 这里






// js 
let animation = function () {
    let animationBox = document.getElementById("animation");

    function show () {
      animationBox.style.transform = "translateX(600px) scale(3,3) rotate(360deg)";
    }

    function init () {
      animationBox.style.transform = "translateX(0) scale(1,1) rotate(-360deg)";
    }

    return { show, init };
  }()

  window.onscroll = function () {
    let scrollTop = +window.scrollY;

    if (scrollTop > 650) {
      animation.show();
    } else {
      animation.init();
    }
  }

因为主要演示动画，所以没写滚动的节流或防抖了 。

当滚动或点击到动画的位置，动画才开始。

在 css 代码可以看到，transition 要通过 transform 的变化来触发。同时我也用到了 cubic-bezier 。

最后

这里不深入讲解 cubic-bezier ，因为我看原理也是头晕。。。。
transition 还可以实现很多功能，淡出淡入 ， 手风琴效果 等等。等着你们去发现。
其实动画不是特别难的，只要你有颗 骚动（好奇）的心。

云服务器 GPU云服务器 css3动画 高性能css3动画 -transition transit

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92797.html

相关文章

  • CSS 动画

    摘要：相关的事件事件会在动画结束的时候触发。事件触发时会传入一些动画相关的参数，例如，，详细内容可以参考。动画的一个方向控制。即动画效果执行后，元素便恢复正常状态。有趣的是，支持小数，即表示动画执行到一半。 CSS 中的 transform，transition 和 animation 是分开的三部分内容，其中 transfrom 主要是控制元素变形，并没有一个时间控制的概念，而 trans...

    沈俭 评论0 收藏0

  • css3动画属性详解之transform、transition、animation

    摘要：动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。 css3动画属性详解： 关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。 一、transform 属性： 旋转rotate（中...

    Riddler 评论0 收藏0

  • CSS3动画效果transition

    摘要：鼠标移动触发的动画效果。第二个参数就是动画耗时，默认是，所以必不可少，要不然没有动画效果，没什么可说的。多个样式各个样式用逗号隔开即可宽度完成变化，高度延迟执行，完成变化，背景色完成变化效果如下未完待续1.transition的浏览器支持情况 IE10+支持，IE6789都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀-webkit- 之类的了 2. 还是一步一步说说怎么用trans...

    番茄西红柿 评论0 收藏0

  • 面试官: css3动画了解吗? 我: .......

    摘要：过渡允许的属性值在一定的时间区间内平滑地过渡。需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。需要事件触发，所以没法在网页加载时自动发生。是一次性的，不能重复发生，除非一再触发。 transition(过渡) transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...

    番茄西红柿 评论0 收藏0

  • 面试官: css3动画了解吗? 我: .......

    摘要：过渡允许的属性值在一定的时间区间内平滑地过渡。需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。需要事件触发，所以没法在网页加载时自动发生。是一次性的，不能重复发生，除非一再触发。 transition(过渡) transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...

    weakish 评论0 收藏0

  • css3中的变形（transform）、过渡（transition）、动画（animation）属性

    摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。 一、 CSS3变形（transform） 语法： transform ： no...

    waruqi 评论0 收藏0

发表评论

登陆后可评论

0条评论

leoperfect

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<