css——动画（transform, transition, animation）

transform

• 静态属性，一旦写进style里面，会立即显示作用，无任何变化过程。（类似于left, right, top, bottom这类属性）
• 主要用来做元素的变形
• 改变元素样式的属性主要有以下五个
  • translate3d(x,y,z) 用来控制元素在页面的三轴上的位置
  • rotate(10deg) 是用来控制元素旋转角度（度deg）
  • skewx,y 制作斜度，2d里面创建3d透视图的必备属性
  • scale3d(2, 1.5, -6) 用来放大缩小效果，属性是比值
  • matrix3d css矩阵，不常用
• 实例

.demo{
    -webkit-transform: rotate(360deg) skew(-20deg) scale(3) translate(100px, 0);
}

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

• 动画属性，允许css的属性值在一定的时间区间内平滑的过渡
• 主要有以下四个属性：
  • transition-property: none(没有属性改变） | all(所有属性改变) | indent(元素属性名)
  • transition-duration: 500ms; 指定元素转换过程的持续时间
  • transition-timing-function: linear(匀速) | ease(逐渐慢下来) | ease-in (加速) | ease-out( 减速) | ease-in-out(先加速后减速）；
  • transition-delay: 0.3s; 当该百年元素属性值后多久时间开始执行transition效果
• 实例

a{
    transition : background .5s  ease-in, color .3s ease-out;
    transition : transform .4s ease-in-out;
}

animation

+为元素实现动画效果，需要和@keyframes一起配合使用，将一套css样式转化成另一套样式

• 若是考虑兼容，需要加上-webkit-， -o-, -ms-, -moz- 等
• @keyframes 类似flash中的时间轴和关键帧

  @keyframes animationname{

  keyframes-selector { //建议用0~100%，from(0), to(100%)

  css-styles;

  }

  }

• 实例

.load-border{
    width: 100px;
    height:100px;
    background: url(‘a.png‘) no-repeat center center;
    -webkit-animation : gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear;
}
@keyframes gif{
     0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        width:200px;
    }
}

参考链接：

MDN | transition过度

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

原文地址：https://www.cnblogs.com/hiluna/p/9588843.html