CSS transform、transition和animation基本用法

2020-11-2209:55:18网页制作Comments2,098 views字数 1771阅读模式

transform

CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

注意: inline元素是不支持 transform,需要编程block文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

常用的功能属性

  • 位移 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%)配合定位来实现元素的水平垂直居中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

缩放 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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

transition

transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

作用:补充中间帧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

语法

  • 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 属性的一个简写属性形式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

keyframe 关键帧

可以为动画变化的关键位置设置一定的顺序。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

它的规则是 @keyframes 名称 {...}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

有两种写法,一种是 0% - 100%,中间可以创建多个百分比给元素加上动画效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

假设自定义 keyfram 名称为:index文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

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

另外一种写法是,from - to,from 相当于 0%,to 相当于100%,中间正常添加百分比。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

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

缩写语法

animation : 动画名 | 持续时间 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

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

想说的一些话

其实CSS 和 画画一样, 不需要逻辑, 需要你有抽象思维,利用这些常用的属性加上你的想象足以可以绘制一个漂亮的画面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

作者:pfzzz
链接:https://juejin.cn/post/6897178216189034510
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20734.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/20734.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定