欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css—动画(transform, transition, animation)

程序员文章站 2024-03-24 23:28:10
...

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