-
transform(变形) → 主要包含: 旋转(rotate) , 移动(translate) , 缩放(scale) , 倾斜(skew)
transform对元素进行的变换.png
transform属性只对元素进行变换，不会产生过渡效果
有时候我们想要实现一个动画,比如说当鼠标经过时,某个div发生偏移。但是如果我们不加延迟时间的话，他的变换往往在一瞬间就结束了。 这时候我们就需要用到transition来进行延迟:
-
transition(过渡) 是一个简写属性，用于设置四个过渡属性：
transition在设置transition-duration属性的情况下，会产生过渡效果。
<< transition: property(属性名) | duration(时间) | timing-function(速度曲线) | delay(何时开始) >>
transition-property : 指对哪个属性进行过渡，有三种设置方法，none（不对任何属性进行过渡），all（对所有属性都进行过渡），indent（元素属性名，如width,color等）。
transition-duration : 规定过渡持续的时间，单位为秒或毫秒（s/ms）。
transition-timing-function：过渡的效果：
（1）ease：逐渐变慢，默认值
（2）linear：匀速
（3）ease-in：加速
（4）ease-out：减速
（5）ease-in-out：加速然后减速
（6）cubic-bezier：该值允许你去自定义一个时间曲线 ，(x1, y1, x2, y2)四个值特定于曲线上点P1和点 P2。所有值需在[0, 1]区域内，否则无效。
transition-delay：过渡效果何时开始
animation与transition 不同的是，keyframes提供更多的控制
-
animation(动画) → 有8个动画属性,如下:
(1). animation-name → → 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致
(2). animation-duration → → 指定元素播放动画所持续的时间
(3). animation-timing-function → → 规定速度效果的速度曲线 (如上: transition的过渡效果)
(4). animation-delay → → 在浏览器开始执行动画之前等待的时间
(5). animation-iteration-count → → 定义动画的播放次数，可选具体次数或者无限(infinite)
(6). animation-direction → → 设置动画播放方向 :
normal(按时间轴顺序)
reverse(时间轴反方向运行)
alternate(轮流，即来回往复进行)
alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
(7). animation-play-state → → 控制元素动画的播放状态，通过此来控制动画的暂停和继续，两个值：running(继续)，paused(暂停)
(8). animation-fill-mode → → 控制动画结束后，元素的样式，有四个值：
none(回到动画没开始时的状态)
forwards(动画结束后动画停留在结束状态)
backwords(动画回到第一帧的状态)
both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次)
上个案例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>animation</title>
<style>
.box {
height: 100px;
width: 100px;
border: 15px solid black;
animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
}
.box:hover {
animation-play-state: paused;
}
@keyframes changebox {
10% {
background: red;
}
50% {
width: 80px;
}
70% {
border: 15px solid yellow;
}
100% {
width: 180px;
height: 180px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
网友评论