CSS Transform和动画

作者: SCQ000 | 来源:发表于2016-09-20 19:15 被阅读576次

    最近在学习CSS动画相关的知识,于是连带着把会用到的一些知识点进行了一些整理。在此,做一下总结。

    Transform

    CSS3中引入的transform属性可以让元素实现变形,旋转,缩放等视觉效果。

    2D变化

    2D的transform应用在xy轴上,而3D的则多了一条z轴。

    1. Rotate旋转

    .box {
      transform: rotate(20deg); //顺时针
    }
    .box2 {
      transform: rotate(-20deg); //逆时针
    }
    

    可以将一个元素绕着旋转点进行0到360度的旋转操作。默认的旋转点是在元素的中心点上(50% 50%)。

    2. Scale缩放

    .box {
      transform: scale(.5); //缩小为原来的一半
    }
    
    .box2 {
      transform: scale(2); //放大为原来的两倍
    }
    

    你也可以只针对宽度或者高度进行缩放操作。

    .box {
      transform: scaleX(2); //将宽度变为原来的两倍
    }
    
    .box2 {
      transform: scaleY(.25); //将高度变为原来的25%
    }
    

    3. Skew 倾斜

    .box {
      transform: skewX(-5deg); //X轴顺时针旋转5度
    }
    
    .box1 {
      transform: skewY(20deg); //Y轴逆时针旋转20度
    }
    
    .box3 {
      transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
    }
    

    4. Translate 平移

    .box {
      transform: translateX(-10px); //在横轴上向左平移10个像素点
    }
    
    .box2 {
      transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
    }
    
    .box3 {
      transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
    }
    

    5. Matrix矩阵

    矩阵形式是将变形函数组合成一个矩阵形式进行使用的,通常都需要借助工具。更详细的说明可以参考这里

    这些变形模式可以同时作用在一个元素上。如

    .box {
      transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2);
    }
    

    Transfrom Origin

    默认的变换原点是在元素的中心,如果我们想要改变它,可以使用属性transform-origin。它接受两个值,分别指定X和Y轴上的位置。可以使用px或百分比作为单位,也可以使用bottom,left等值进行定义。

    .box {
      transform: rotate(15deg);
      transform-origin: 0 0; //以左上角点为变换点进行旋转
    }
    

    3D变化

    3D是以2D变化为基础的,只是增加了一个z轴。这条z轴是可以看做一个虚拟垂直与屏幕的坐标轴,它代表在元素的远近距离。其中正值代表离屏幕越近,负值代表离屏幕越远。

    Perspective

    perspective在中文中翻译为透视,这个属性值在应用中主要是用来指定元素离观看者的距离,值的设定一般来说设置为< 300px时会有强烈失真,500~1000px失真中等,2000px以上失真轻微。

    定义perspective属性可以选择直接定义在transform中,如:

    .box {
      transform: perspective(300px) rotateX(20deg);
    }
    

    也可以选择定义在父元素上,这样,所有子元素都将使用这个值:

    .parent {
      perspective: 300px;
    }
    
    .child  {
      transform: rotateX(20deg);
    }
    

    perspective-origin

    这个属性是叫做“透视原点”,可以使用X轴与Y轴的长度数据或百分比,以及left/center等值进行设置。默认值为50% 50%。可以看做镜头在平面上的距离。

    backface-visibility

    这个属性用来控制是否可以看到被挡住的那些面,它的值分为visiblehidden

    Transition

    transition主要是用来做过渡效果的,可以提供使元素间的变化显得不那么生硬。

    属性 作用
    transition-property CSS属性值 定义哪些CSS属性会应用transition
    transition-duration 时间 定义transition的持续时间
    transition-timing-function 时间函数:ease|linear|ease-in|step-start等 用来控制过渡效果速度函数的
    transition-delay 时间 延迟

    transition属性的合并用法是按照上述的属性顺序进行定义的。缺失的将使用默认值。

    .box {
      transition: all .5s ease; 
    }
    

    Animation & Keyframes

    要使用CSS动画,需要先定义一个关键帧(keyframes)。关键帧指明在特定时间点元素所展示出来的样式状态。触发的时间点用百分比表示,其中from关键字相当于0%,to关键字相当于100%。在定义关键帧中元素样式时候,!important关键字会被忽略。

    @keyframes animationName {
      0% {
        opacity: 1;
      }
      
      100% {
        opacity: 0;
      }
    }
    
    @keyframes fadeFromTo {
      from {
        opacity: 1;
      }
      
      to {
        opacity: 0;
      }
    }
    

    animation的属性有

    属性 作用
    animation-name 定义的keyframes名字 用来获取定义的动画效果
    animation-duration 时间长度 用来指定动画从开始到结束所用时间
    animation-delay 时间长度 延迟时间
    animation-iteration-count 数字(可以使用小数) 或 infinite(无限) 动画循环播放次数
    animation-timing-function linear等 定义动画播放函数,用以控制播放速度曲线
    animation-fill-mode none,forwards,backwards,both 指定当动画播放结束的时候应用到元素上的样式
    animation-direction normal,reverse,alternate,alternate-reverse 控制动画是否反向播放

    其简写形式为:

    animation : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
    

    多个动画

    当要对一个元素添加多个动画效果时,需要用,分隔开来,如:

    .element {
      animation: fadeIn 4s 1s infinite linear alternate,
                rotate 4s 1s infinite linear alternate;
    }
    
    @keyframes fadeIn {
      to {
        opacity: 0;
      }
    }
    
    @keyframes rotate {
      to {
        transform: rotate(180deg);
      }
    }
    

    相关文章

      网友评论

        本文标题:CSS Transform和动画

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