一、过渡（transition）

*！display没有过渡效果*

复合写法：

transition: css属性 过渡效果持续时长 过渡的方式  延迟时间;

1、语法、属性

//选择过渡效果的css-属性（可以多个 空格隔开  all指全部属性）
transition-property:left;//过渡时间（s）
transition-duration:5s;//过渡的方式（linear匀速）
transition-timing-funcation:linear;//延迟时间后在执行过渡效果
transition-delay:3s;//复合写法：第一个时间是过度时间，第二个延迟时间
transition:left 5s linear 3s;//注意移入 transition写在hover中
//移入移出写在变化的属性上；.box1:hover p{transition-timing-function:ease;}/*默认*/
.box2:hover p{transition-timing-function:linear;}/*匀速*/
.box3:hover p{transition-timing-function:ease-in;}/*加速前进*/
.box4:hover p{transition-timing-function:ease-out;}/*减速前进*/
.box5:hover p{transition-timing-function:ease-in-out;}/*先加速后减速*/
.box6:hover p{transition-timing-function:cubic-bezier(1,-1,1,.51);}/* 贝塞尔曲线 */

过渡速度曲线对比如下图:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 400px;height: 300px;border: 1px solid red;}p{width: 100px;height: 30px;border: 1px solid black;background-color: aqua;transition: all 3s;}.box:hover p{width: 400px;}.box:hover p:nth-child(1){/* 匀速 */transition-timing-function: linear;}.box:hover p:nth-child(2){/* 默认 */transition-timing-function: ease;}.box:hover p:nth-child(3){/* 加速前进 */transition-timing-function: ease-in;}.box:hover p:nth-child(4){/* 减速前进 */transition-timing-function: ease-out;}.box:hover p:nth-child(5){/* 先加速下减速 */transition-timing-function: ease-in-out;}</style>
</head>
<body><div class="box"><p>linear</p><p>ease</p><p>ease-in</p><p>ease-out</p><p>ease-in-out</p></div>
</body>
</html>

二、2D（transform）

常用属性：translate()、rotate()、scaleX()、scaleY()、scale()
少用：沿着那边倾斜角度skewX(30deg)、skewY()、skew(x ，y)
matrix()可包含6个参数：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

1、平移：

tranform:translateX(x轴移动距离)
tranform:translateY(Y轴移动距离)
tranform:translate(x轴距离,y轴距离)
tranform:tanslate(50%,50%) 50%是自身的一半

2、scale（放大倍数）

zoom也能放大，但是所有的属性都会变大（放在父元素）

tranform:scaleX(2);
tranform:scaleY(2);
tranform:scale(2);
tranform:scale(0.5);

3、旋转

//x轴
tranform:rotateX(90deg);
//y轴
tranform:rotateY(90deg);
//自身中心点旋转
trandorm:rotate(90deg)
//背面是否可见(默认可见)
backface-visibility:hiddren;
//设置旋转圆点
tranform-origin:x/y;

三、3d动画

1、3d转换(父元素)

父元素设置景深（屏幕内到物体的距离）

perspective:1200px;

设置屏幕观察点

perspective-origin:50% 50%；

设置为3d展示

transform-style:perserve-3d;

2、定义动画

<style>@keyframs 动画名1{/* 元素初始状态 */from{/* 元素第一个关键帧样式 */}/* 动画结束的样式 */to{ /* 元素最后一个关键帧样式 */}
}/* 百分比定义*/@keyframs 动画名2{0%{}25%{}50%{}100%{}
}
</style>

3、使用动画

复合写法

animation: 动画名称 动画需要的时长 速度方式 延迟时间 infinite/次数 是否反向运动 动画结束是否停留在结束位置;

div{animation-name:动画名;/* 动画时间*/animation-duration:1s;/*动画速度方式属性值和过渡的速度曲线一样*/animation-timing-funcation:linear;/*动画应运行的次数  infinite反复运行动画*/animation-iteration-count:3/infinite;/*动画执行的方向是向前播放、向后播放还是交替播放。normal - 动画正常播放（向前）。默认值reverse - 动画以反方向播放（向后）alternate - 动画先向前播放，然后向后alternate-reverse - 动画先向后播放，然后向前*/animation-direction：alternate/normal;/* forwards 动画停在最后一帧  none最开始的位置*/animation-fill-mode:forwards/none;/* paused暂停  running播放*/animation-play-state:paused/running;
}

4、渐变（简单记录）

线性渐变

/*线性渐变*/
background-image:linear-gradient(red,yellow,blue);/*不同方向渐变：to +（left、 right、 bottom、 top  （left top）、（left bottom）、（right top）、（right bottom））*/
background-image:linear-gradient( to left, red,yellow,blue);
/*重复渐变*/
background-image:repeating-linear-gradient( to left, red,yellow,blue);

径向渐变

/*（默认椭圆形）*/
background-image:radial-gradient(red,bule)/*渐变范围
closest 最近的边
closest-corner  最近的角
farthest    最远的边
farthest-corner 最远的角
*/
background-image:radial-gradient(circle,red,bule)/*重复渐变*/
background-image:repeating-radial-gradient(circle,red,bule)

本人是简单记录，更加详细可以看菜鸟，W3c。哪里有错请指出，互相学习，加油。

前端学习-过渡、2d和3d动画相关推荐

Explaindio Video Creator Platinum(简称EVC) 3.042 Windows中文白金版MG动画2D和3D动画解说动画手绘白板动画视频制作软件
Explaindio Video Creator(简称EVC)是一款有名的视频制作软件,可以制作2D和3D动画视频,解说动画视频,手绘白板动画视频,MG视频等等,大多数用户拿来制作手绘白板动画视频. ...
web前端学习（十三）animation动画
动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性. Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时 ...
2d的公式_用深度学习实现 2D 到 3D 的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
双目相机定位3d python_用深度学习实现 2D 到 3D 的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
学术派 |用深度学习实现2D到3D的转换
随着 5G 时代的到来,VR 端应用呈爆发式增长,3D 内容作为构建 VR 生态的主力输出一直深受广大用户的追捧和喜爱.针对目前 3D 内容过少,质量不高.生产昂贵等现状,爱奇艺作为国内领先的互联网视 ...
CSS3 -- API学习 (2D、3D动画效果)
一.2D效果 1.translate(xpx,ypx).translateX(xpx),translateY(ypx) 右平移xpx,左平移ypx <!DOCTYPE html&g ...
【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】
文字阴影text-shadow text-shadow 后面的值有4个: 第一个:X轴,水平阴影位置允许负值. 第二个:y轴,垂直阴影位置,允许负值. 第三个:blur, 模糊的距离第 ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
Web前端学习笔记08：HTML5_CSS3
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.`CSS3 ` 属性选择器(上) 六.`CSS3 ` 属性选择器( ...

前端学习-过渡、2d和3d动画

一、过渡（transition）

1、语法、属性

二、2D（transform）

1、平移：

2、scale（放大倍数）

3、旋转

三、3d动画

1、3d转换(父元素)

2、定义动画

3、使用动画

4、渐变（简单记录）

前端学习-过渡、2d和3d动画相关推荐

最新文章

热门文章