响应式Web设计:HTML5和CSS3实战(第2版)
第八章 CSS3过渡、变形和动画
- 过渡——transition
- 变形——transform
- 动画——animation
8.1什么是CSS3过渡以及如何使用它
- 当元素的CSS状态改变时，过渡是最简单的创造视觉效果的方式。
- 如：我们在给超链接设置样式的时候，一般都会设置一个悬停状态的效果
- transition: box-shadow 1s;
- 在box-shadow上，将会耗时1秒，从现存状态切换到悬停状态。
8.1.1 过渡的简写语法
- 倾向使用缩写版，
- transition: all 1s ease 0s;
- 第一个和时间相关的值会被应用给transition-duration
- 第二个则会被应用到transition-delay上
8.1.2 在不同时间段内过渡不同属性
.style {
/* ...（其他样式）... */
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
8.1.3 过渡调速函数
- 贝塞尔曲线，本质上是缓动函数
- ease（默认）、linear、ease-in、ease-out、ease-in-out和cubic-bezier
8.2 CSS的2D变形
- 过渡是从一种状态平滑转换到另一种状态
- 变形则定义了元素将会变成什么样子
- 想象一下《变形金刚》里的擎天柱，他通过变形来变成一部卡车。而在机器人与卡车之间的阶段，我们称之为过渡（从一个状态过渡到另一个状态）。
- 变形是在文档流外发生的
8.2.1 scale
- 因为变形在文档流之外，所以如下设置的样式变形，并不会导致同类位置的变动
.scale:hover {
transform: scale(1.4);
}
8.2.2 translate
- translate会告知浏览器按照一定的度量值移动元素，可以使用像素或者百分比
- 第一个值是X轴上偏移的距离
- 第二个是Y轴上偏移的距离
- 正值会让元素向右或者向下移动，负值则会让元素向左或者向上移动。
.translate:hover {
transform: translate(-20px, -20px);
}
+ 如果你只传入一个值，它会被应用到X轴上。
+ 如果你想指定一个轴进行移动，可以使用translateX或者translateY。
.inner {
position: absolute;
width: 200px;
background-color: #999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
8.2.3 rotate
- rotate允许你旋转一个元素
- 括号中的值只能以度为单位（如90deg）。正值时会进行顺时针旋转，而负值则会逆时针旋转。
.rotate:hover {
transform: rotate(30deg);
}
8.2.4 skew
- skew（斜切）会让元素在一个或者两个轴上变形偏斜。
- 第一个值是X轴上的斜切（本例中是40度）
- 第二个值是Y轴上的斜切（本例中是12度）
- 忽略第二个值意味着仅有的值只会应用在X轴上（水平方向）。
.skew:hover {
transform: skew(40deg, 12deg);
}
8.2.5 matrix
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}
8.2.6 transform-origin属性
- 在CSS里，默认的变形原点（浏览器中作为变形中心的点）是在正中心：
- 元素X轴的50%和Y轴的50%处
- 这和SVG默认的左上角（或者0 0）是不同的。
- 使用transform-origin，我们可以修改变形原点
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
transform-origin: 270px 20px;
}
8.3 CSS3的3D变形
- 使用perspective属性来设置用户视点到3D场景的距离。
- 结构:
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
.flipper {
perspective: 400px;
position: relative;
}
/* 我们将父元素设置为相对定位，从而创造一个上下文来放置flipper-object。 */
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
- 使用backface-visibility属性把它设置为hidden来隐藏元素的背面
8.4 CSS3动画效果
- 相较于3D变形，CSS3动画的支持度更高。
- 将在元素翻转后为其添加脉冲动画效果。
- 这里只定义了一个简单的关键帧选择器：100%。
- 也可以设置多个关键帧选择器（推荐你使用百分比）。你可以把它们想象成时间轴上的点。
@keyframes pulse {
100% {
text-shadow: 0 0 5px #bbb;
box-shadow: 0 0 3px 4px #bbb;
}
}
- 最好使用一个能代表动画效果的名字，因为一个关键帧声明可以在项目中多处复用。
.flipper:hover .flipper-horizontal {
transform: rotateY(180deg);
animation: pulse 1s 1s infinite alternate both;
}
- animation-fill-mode属性
- animation-fill-mode: forwards;
- 这指使元素保留动画结束时的值。
