一、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:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
取值 | 描述 |
---|---|
none | 默认值 |
forwards | 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值 |
backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时) |
both | 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性 |
简单的动画制作:
*{
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;
}
}