弹性盒子笔记

笨笨要努力

已于 2022-03-28 17:03:33 修改

阅读量171

点赞数

分类专栏： css3 自学笔记文章标签： css3动画浏览器前缀

于 2019-08-10 10:31:53 首次发布

本文链接：https://blog.csdn.net/qq_41117240/article/details/99058365

版权

10 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

(弹性盒子)

css动画

动画属性兼容性，需要写5遍浏览器前缀
浏览器的前缀
-webkit-谷歌浏览器
-o-欧鹏浏览器
-khtml-苹果浏览器
-moz-火狐浏览器
-ms-IE浏览器

translateX(200px)水平移动
translateY()垂直移动
translateZ()前后移动

(2) scale(x,y,z)缩放默认给所有轴问如何看出来Z轴缩放了，请举例。

  scaleX()缩放宽度
  scaleX()缩放高度
  scaleZ()缩放厚度

没单位两个参数缩放宽高，属于2d缩放(写代码时不需要写2d字样) 一个参数为等比缩放
三个参数 scale3d(x,y,z) 可以设置，Z轴的缩放，3d缩放 (3个值，必须加3d，否则报错，可单独设置Z轴缩放)
(3)rotate(x,y,z)旋转默认值给z轴 (正方形，转成菱形)

rotateX()水平 
rotateY()垂直 
rotateZ()中心轴

单位：度deg

(4)skew(x,y)扭曲(斜拉) 默认x轴(不理解)

skewX()水平
skewY()垂直

	单位：度 deg

(5)matrix(1,0,0,1,0,0)矩阵 2d变换 3*3
值的顺序：（缩放宽度 Y轴扭曲 X轴扭曲高度缩放水平移动垂直移动）全部不用写单位

Matrix3d(1,0,0,1,0,0)  //3d变换 4*4

transition( 1 2 3 4 ) 4延迟可以省略，默认不延迟。

transition-property指定要做动画的css
transition-duration动画过度时间
transition-timing-function动画类型
linear(匀速)线性 ease(慢快慢)平滑 ease-in 由慢到快 ease-out由快到慢 ease-in-out 由慢到快再到慢
transition-delay延迟时间
单位：秒数s
注意：display不支持动画效果，不是所有属性都能做动画效果
visibility可以opacity可以隐藏

属性时间效果延迟
例子：（悬停后，元素一边旋转一边变大）

.box2:hover div{
    width: 100px;
    height: 100px;
    transform: rotate(360deg);
}
.box2 div:nth-child(1){
    transition: all 5s linear ;
}

Animation(帧动画)

animation-name定义动画名称即@keyframes动画的名称
animation-duration 动画时间单位：秒s 默认0
animation-timing-function 动画类型规定动画的速度曲线，默认时ease
animation-delay动画延迟时间单位：秒：s 默认时0
animation–iteration-count 规定动画的播放次数默认1 infinite无限循环
animation-direction规定动画是否在下一周期逆向的播放 (循环次数大于2)
默认normal正向播放 reverse 动画反向播放 alternate (奇数时正向播放，偶数时反向播放)正反交替 alternate- reverse正反交替(奇数时反向播放，偶数时正向播放)
animation-play-state动画状态(鼠标悬停)
running 运动 paused 停止
animation-fill-mode动画时间之外的状态
none 不设置 backwards开始位置 forwards 结束位置

执行动画

	@keyframes 名称{
例子：圆球移动轨迹
		方法一（水平）
		form{}
		to{}
		方法二（水平和垂直）
		0%{}
		25{}
		50{}
		100%{}
}

关注