CSS中的transform、transition和animation基本用法

时间:2021-2-20 作者:admin

transform

CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

注意: inline元素是不支持 transform,需要编程block

常用的功能属性

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate

位移 translate 常用写法

  • translate( <length-percentage> , <length-percentage>? )
  • translateX( <length-percentage> )
  • translateY( <length-percentage> )
  • translateZ( <length> 且父容器要有perspective属性)
  • translate3d(x,y,z)

经常使用 translate(-50%,-50%)配合定位来实现元素的水平垂直居中

缩放 scale 常用写法

  • scale( <number、> , <number>? )
  • scaleX( <number> )
  • scaleY( <number> )

旋转 rotate 常用用法

  • rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
  • rotateX( [ <angle> | <zero> ] )
  • rotateY( [ <angle> | <zero> ] )
  • rotateZ( [ <angle> | <zero> ] )

经常用到去制作loading

transition

transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。

作用:补充中间帧

语法

  • transition: 属性名 时长 过渡方式 延迟
  • transition属性可以被指定为一个或多个 CSS 属性的过渡效果,多个属性之间用逗号进行分隔。 eg transition:left 200ms, top 400ms
  • 可以用all来代表所有属性
  • 常用过渡方式有: linear | ease | ease-in | ease-out | ease-in-out 等

animation

CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

keyframe 关键帧

可以为动画变化的关键位置设置一定的顺序。

它的规则是 @keyframes 名称 {…}

有两种写法,一种是 0% – 100%,中间可以创建多个百分比给元素加上动画效果。

假设自定义 keyfram 名称为:index

@keyframes xxx {
    0% {
        /* 动画代码 */
    }
    50% {
        /* 动画代码 */
    }
    100% {
        /* 动画代码 */
    }
}

另外一种写法是,from – to,from 相当于 0%,to 相当于100%,中间正常添加百分比。

@keyframes xxx {
    from {
        /* 动画代码 */
    }
    50% {
        /* 动画代码 */
    }
    to {
        /* 动画代码 */
    }
}

缩写语法

animation : 动画名 | 持续时间 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 ;

  • 持续时间: 1S 或者 1000ms (单位可用s和ms)
  • 过渡方式: 跟transition取值一样
  • 次数: 3 或 2.1 或者 infinite(无限循环)
  • 方向: reverse | alternate(偶数次反向播放、奇数次正向播放) | alternate-reverse(alternate反之)
  • 填充: none | forwards | backwards | both
    • forwards : 当动画完成后,保持最后一个属性值,(在最后一个关键帧中定义)
  • 是否暂停: paused | running

想说的一些话

其实CSS 和 画画一样, 不需要逻辑, 需要你有抽象思维,利用这些常用的属性加上你的想象足以可以绘制一个漂亮的画面。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。