美文网首页
如何用 CSS3 制作过渡动画 (2D变形transform)

如何用 CSS3 制作过渡动画 (2D变形transform)

作者: 木子9268 | 来源:发表于2019-02-08 18:24 被阅读0次

    transition:

    过渡动画: 是从一个状态 渐渐的过渡到另外一个状态

    帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

         过渡 (transition)是CSS3 中具有颠覆性的特征之一,我们可以在不使用flash动画或者JavaScript 的情况下,当元素从一种方式变换为另一种方式时为元素添加效果。

    语法格式:

        transition: transition-property transition-duration transition-timing-function transition-delay;

        如果有多组属性变化,还是用逗号隔开。

    属性&描述

    transition:简写属性,用于在一个属性中设置四个过渡属性。

    transition-property:规定应用过度的 CSS 属性的名称 (eg. width height)

    transition-duration:定义过渡效果花费的时间。默认值是0。

    transition-timing-function:规定过度效果的时间曲线。默认是 “ease”。

    transition-delay:规定过渡效果何时开始。默认是 0。


    要想所有的属性都变化过渡,写一个all 就可以。

    transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

    transform:


        transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

    变形转换 transform    transform  变换 变形的意思            《 transformers 变形金刚》

    属性值:

    translate(x,y)移动

    scale(x,y)缩放

    rotate(deg) 旋转 (deg为单位,不能丢)

    skew(deg,deg)倾斜


    transform-origin 调整元素转换变形的原点

    相关文章

      网友评论

          本文标题:如何用 CSS3 制作过渡动画 (2D变形transform)

          本文链接:https://www.haomeiwen.com/subject/ksrosqtx.html