css3动画

作者: 月光在心中 | 来源:发表于2017-08-02 17:01 被阅读9次

s秒 ms毫秒
transition:1s; 过渡 transition:1s过渡时长(duration) 1s延迟时长(delay);
transition:1s width;指定宽有个过渡
transition:2s width,1s height;指定宽2秒过渡、高1秒过渡
transition-timing-function:ease-in;慢到快 ease快到慢默认值 linear匀速 ease-in-out慢快慢
transition:2s cubic-bezier(0.1 0.6 0.2 0); cubic-bezier:特殊的立方贝塞尔曲线效果

综合写:animation:@keyframes关键帧的名称 一个周期时长 周期数 顺序 过程中的状态
animation-name:rainbow;名称
animation-duration:3s;一个周期的时长
animation-direction:reverse;倒序播放 alternate正序
alternate-reverse正序反序(用hover时与周期次数连用)
animation-iteration-count:2;周期次数 infinite无穷
animation-fill-mode:forwards;动画结束时的状态 backwards开始状态 both none默认值

transform 变形 transform:rotate(45deg);旋转(整体转) 以原点开始顺时针旋转,负值逆时针转
transform:scale(1,2); 缩放倍率 没有单位
一个值宽高缩放一样倍率,边框会放大。 负值时整个元素会翻转180度再缩放
两个值宽高各自设置缩放倍率,延X轴缩放、水平方向拉伸左右两边的边框会放大;
延Y轴缩放、垂直方向拉伸上下两边的边框会放大。
transform:skew(45deg);倾斜 元素改变形状
skewX延X轴倾斜时正值左右的两个边倾斜度数(逆时针)负值反之
skewY延Y轴倾斜时正值上下的两个边倾斜度数(顺时针)
负值时逆时针、内容也会倒过来
transform:translate(100px 100px);平移(也可负值) 延X轴Y轴平移 默认延X轴平移
以上是以默认中心为基准点,也可设定:transform-origin:x y;或放位置left right等

3D:作用在x、y、z轴
配置场景用(加在父元素上):perspective视距,transform-style:preserve-3d;3D场景
旋转:transform:rotate3d(1,1,1,45deg);x、y、z轴 是否旋转1转0不转***
缩放倍率:transform:scale3d(2,2,2);z轴上的缩放倍率没有,显示不出来*
倾斜:(与2D用法相同)transform:skew(45deg);无3d效果
平移:transform:translate3d(100px 100px 200px);要给视距,不然z轴上看不出来***

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3 动画

    CSS3 动画CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 纯CSS3绘制的逼真,呆萌,超酷的CSS3动画

    纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人...

  • 关于js动画和css3动画的差异性你了解吗?请简单谈一下

    css3动画:css3之后添加了transform动画计算函数,所以实现动画更为简单方便,并且transform矩...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

  • 动画知识点

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

网友评论

    本文标题:css3动画

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