目录
1.动画
动画使元素逐渐从一种样式变为另一种样式。
可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画,必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
1.1实现步骤
1.1.1 @keyframes 动画名{
from {
// 开始帧
}
to {
// 结束帧
}
}
1.1.2@keyframes 动画名{
0% {
// 开始帧
}
20% {
}
...
100% {
// 结束帧
}
}
1.2属性规则
animation-name: move; 动画名
animation-duration: 2s; 持续时间(默认值是 0s)
animation-timing-function: linear; 时间曲线函数(自由落体,贝塞尔曲线)
animation-fill-mode:forwards; 填充模式,动画结束后保留哪一帧规则
none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。
backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
animation-iteration-count: 2; 动画应运行的次数
animation-direction: alternate-reverse; 动画执行的方向 from->to , to->from
normal - 动画正常播放(向前)。默认值
reverse - 动画以反方向播放(向后)
alternate - 动画先向前播放,然后向后
alternate-reverse - 动画先向后播放,然后向前
animation-play-state: paused; 动画状态
animation-delay: 1s; 延迟时间
animation: move 2s 1s 2 linear; 动画的速写形式
1.3呼吸灯
<style>
body{
margin: 0;
padding: 0;
}
div{
box-sizing: border-box;
}
.content{
width: 400px;
height: 600px;
background-color: #FFFF99;
margin: 0 auto;
}
.content >.box{
border: 1px solid #cccc21;
height: 400px;
padding: 40px;
animation-name: outer;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.content >.box >.outer{
border: 4px solid #CCCCFF;
height: 100%;
padding: 20px;
animation-name: inner;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.content >.box >.outer >.inner{
border: 6px solid #a6a6f7;
height: 100%;
}
.circle{
border-radius: 50%;
}
@keyframes outer{
25%{
padding: 30px;
}
50%{
padding: 40px;
}
}
@keyframes inner{
25%{
padding: 30px;
}
50%{
padding: 20px;
}
75%{
padding: 30px;
}
100%{
padding: 20px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="outer circle">
<div class="inner circle">
</div>
</div>
</div>
</div>
2.过渡
过渡是轻量级的动画,过渡中无需定义关键帧,它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上(状态发生变化的时候)
2.1实现步骤
- 明确要添加效果的 CSS 属性
- 效果的持续时间
2.2属性规则
transition-timing-function 属性规定过渡效果的速度曲线。
transition-delay 属性规定过渡效果的延迟(以秒计)。
transition-property规定过渡效果所针对的 CSS 属性的名称。
transition-duration规定过渡效果要持续多少秒或毫秒。
transition(简写属性): property duration timing-function delay;
3.转换
translate() 方法
translate(20px 100px(向右向下)) 方法从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)。
rotate() 方法
rotate(20deg( 顺时针20°/-20deg为逆时针)) 方法根据给定的角度顺时针或逆时针旋转元素。
scale() 方法
scale(2,3(增大为其原始宽度的两倍和其原始高度的三倍)) 方法增加或减少元素的大小(根据给定的宽度和高度参数)。
skew() 方法
skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。