美文网首页
背面可见与动画

背面可见与动画

作者: lyf_god | 来源:发表于2019-06-05 09:02 被阅读0次

1、translate(x,y) 设置盒子位移

2、scale(x,y) 设置盒子缩放

3、rotate(deg) 设置盒子旋转

4、skew(x-angle,y-angle) 设置盒子斜切

5、perspective 设置透视距离

6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示

7、translateX、translateY、translateZ 设置三维移动

8、rotateX、rotateY、rotateZ 设置三维旋转

9、scaleX、scaleY、scaleZ 设置三维缩放

10、tranform-origin 设置变形的中心点

11、backface-visibility 设置盒子背面是否可见

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration 动画时间

4、animation-timing-function 动画曲线

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

steps 动画步数

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction

normal 默认动画结束不返回

Alternate 动画结束后返回

8、animation-play-state 动画状态

paused 停止

running 运动

9、animation-fill-mode 动画前后的状态

none 不改变默认行为

forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

相关文章

  • 背面可见与动画

    1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg)...

  • 前端(动画)

    变形中心 背面可见 图片翻面 animation动画 人物走路动画 多帧动画 loading动画

  • 变形,背面可见,animation动画

    变形: 位移transform:translate(50px,50px)水平 垂直,性能更高,不影响其他块 旋转t...

  • 前端(动画)

    变形中心点 背面可见 图片翻面 animation动画 多帧动画 今天小练习 loading动画

  • 2018-11-28

    变形 元素旋转 变形中心点 背面可见 图片翻面 animation动画 人物走路动画 多帧动画

  • 2019-06-04

    css基础知识 变形: 元素旋转 变形中心点: 背面可见 图片翻转: animation动画: 定义动画名称及形式...

  • HTML-08day

    1、背面可见 2、变形 3、变形中心点 4、多帧动画 5、动画 6、过渡动画 7、图片翻页 8、文字遮罩 9、小人...

  • 前端(九)

    1.变形 2.变形中心点 运行结果: 3.背面可见 能翻动 运行结果: 4.动画作业 运行结果:

  • 前端笔记(8)

    代码:1.人物走路动画 2.元素旋转 3.变形中心点 4.图片文字遮罩 5.图片翻面 6.多帧动画 7.背面可见 ...

  • React Native常用组件样式总结

    View Style支持Flexbox、ShadowPropTypesIOS、Transforms属性。 背面可见...

网友评论

      本文标题:背面可见与动画

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