一、transform属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
1、移动
基本语法:transform: translate(0px,0px);或者transform: translateX(0px);、transform: translateY(0px);。
transform: translate(0px,0px):表示第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离;
transform: translateX(0px)、transform: translateY(0px):分别表示水平方向与垂直方向上移动的距离。
2、缩放
基本语法:transform: scale(1)或者transform: scale(1, 1)、transform: scaleX(1)、transform: scaleY(1)。
transform: scale(1):表示水平和垂直同时缩放该倍率;
transform: scale(1, 1):第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率;
transform: scaleX(1)、transform: scaleY(1):分别表示水平方向和垂直方向上的缩放倍率。
3、旋转
基本语法:transform: rotate(90deg)。
rotate()里的值表示要旋转的角度,deg表示单位度。rotate默认是围绕旋转中心旋转。
可以用transform-origin:0px 0px;来改变旋转中心:
列如:
#box{
width: 200px;
height: 200px;
background-color: red;
transform:rotate(45deg);
transform-origin:left top;
}
4、倾斜
基本语法:transform: skew(0deg, 0deg);或者transform: skewX(0deg)、transform: skewY(0deg)
transform: skewX(0deg) 、transform: skewY(0deg) :分别表示水平方向和垂直方向的倾斜角度;
transform: skew(0deg, 0deg):第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。
二、animation属性
animation 属性是一个简写属性,用于设置六个动画属性:
属性 描述
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-direction 规定是否应该轮流反向播放动画
animation-play-state 规定动画是否正在运行或暂停
animation-iteration-count 规定动画被播放的次数
1、animation-timing-function:规定动画的速度曲线;一些常用的取值
取值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束。 |
2、animation-iteration-count :定义动画应该播放多少次。animation-iteration-count: 4表示定义应该播放4次动画; animation-iteration-count: infinite表示指定动画一直播放。
3、animation-direction:定义是否循环交替反向播放动画。
取值 | 描述 |
---|---|
normal | 默认值。动画按正常播放 |
reverse | 动画反向播放 |
alternate | 表示动画先正向播放,再反向播放 |
alternate-reverse | 表示动画先反向播放,再正向播放 |
4、animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
简单的动画制作:
*{
margin: 0px;
padding: 0px;
background-color:rgb(20, 212, 180);
}
#box{
width: 200px;
height: 200px;
margin-top: 15%;
animation: move 4s ease-in-out 2s infinite alternate both;
}
@keyframes move{
0%{
transform: translate(0px,0px);
background-color:rgb(204, 36, 72);
border-radius: 100px;
}
50%{
transform: translate(550px,0px);
background-color:rgb(204, 36, 72);
border-radius: 0px;
}
100%{
transform: translate(1120px,0px);
background-color:rgb(235, 192, 51);
border-radius: 100px;
}
}