动画
过渡
动画的过渡:
transition-property: 指定要过渡的属性名称,多个属性使用逗号隔开
transition-duration: 整个过渡过程所需要的时间,单位s/ms
transition-timing-function: 过渡函数,即如何运动,可选值
ease: 先加速再减速
linear: 匀速
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速再减速
可以使用transition 属性来设置多个属性的值,减少代码量,提高可读性
语法:
transition: 属性,属性,.....duration delay function 多个属性之间加逗号
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 50px;
}
/* 设置过渡 */
div:hover{
width: 400px;
height: 400px;
/* transition-property: width,height;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 2s; */
transition: width ,height, 3s 2s linear;
}
</style>
</head>
<body>
<div>
</div>
</body>
动画
动画
1.动画和过渡类似,都是可以实现一些动态的效果;
2.不同的是过渡需要在某个属性发生变化时才会触发;
3.动画可以自动触发动态效果
<head>
<style>
#outer
{
width: 800px;
height: 500px;
background-color: aqua;
margin: 0 auto;
}
#inner{
width: 100px;
height: 100px;
background-color: orange;
/* 由于动画(关键帧)设置的是偏移量的改变,因此需要开启该元素的相对定位 */
position: relative;
/* 设置动画的各个属性 */
animation-name: run; /*用于指定要使用的关键帧的名字*/
animation-duration: 3s; /*动画执行的整个过程需要的时间*/
animation-timing-function: ease-in; /*动画如何运行*/
animation-delay: 2s; /*动画的延迟时间*/
animation-iteration-count: 2; /*动画从初始位置到结束位置执行的次数*/
animation-direction: normal; /*动画的执行方向 normal reverse alternate alternate-reverse */
animation-fill-mode: forwards; /*动画的填充(结束后停止的位置) forwards,backwards,both,none*/
/* 使用一个属性animation,来设置上述多个属性的值 */
/* 关键帧 运动时间 运动速度曲线 延迟 次数 运动方向 运动的填充 */
animation: run 10s cubic-bezier(.87, .28, .91, .36) 2s infinite reverse forwards;
}
/* 设置关键帧 0%相当于from 100%相当于to 百分比可以是任意0~100之间任意的整数 */
@keyframes run {
/*from*/0%{
left: 0px;
top: 0px;
}
15%{
left: 350px;
top: 0px;
}
30%{
left: 700px;
top: 0px;
}
50%{
left: 700px;
top: 200px;
}
75%{
left:400px ;
top: 200px;
}
/*to*/100%{
left: 0px;
top: 200px;
}
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
变形
平移
变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移:
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
旋转
-旋转
rotateX(度数): 以x轴为轴心,进行旋转 deg是度数 turn圈 360deg=1turn 一个圆是一圈
rotateY(度数): 以y轴为轴心,进行旋转
rotateZ(度数): 以z轴为轴心,进行旋转
缩放
-缩放
scaleX(倍数): 水平方向(即X轴方向)缩放
scaleY(倍数): 垂直方向
scaleZ(倍数): z轴方向缩放
scale(倍数): 相当于scale(x)和scale(y)的缩放