Learning Points
- Deformation transform 2D
- Transition transition
- Animation animation
Animations in web pages
The traditional way
- Dynamic Photo: Typical Gif map Pan
- Flash: Flash required plug-in support, large file size. (Ie + flashplayer)
- JavaScript: rich animation effects can be achieved.
CSS way
- CSS3 deformation
- CSS3 transitions
- CSS3 animations
transform deformation
definition
- CSS3 modification is a collection of effects: such as translation, rotation, zoom, tilt effect
- Each effect can be referred to as modified (Transform), which can control each element of the translation occurs, rotation, scaling, skewing, and other changes.
Syntax
transform:[transform-function] *;
transform-function: function setting modification may be one or may be plural, separate intermediate spaces.
Morphing function
Browser support
- When using 2D deformation IE 9, -ms- need to add a prefix, to support the standard version starts after IE 10.
- Firefox 3.5 to Firefox 15.0 version you need to add the prefix -moz-, began to support the standard in future versions of Firefox 16.
- Chrome 4.0 supports 2D deformation start, we need to add a prefix in actual use -webkit-.
- Opera 10.5 begin to add the prefix -o-.
- Safari 3.1 supports 2D deformation start, we need to add the prefix -webkit- in actual use.
- Reference website: http://www.caniuse.com
- Add reference code prefix
div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
2D displacement
1, grammar
translate(tx,ty);
tx: X-axis (abscissa) moving vector length
ty: Y-axis (abscissa) moving vector length
2, the sample code
<head lang="en">
<meta charset="UTF-8">
<title>translate的使用</title>
<style>
li{
list-style: none;
float: left;
width: 80px;
line-height: 40px;
background: rgba(242, 123, 5, 0.61);
border-radius: 6px;
font-size: 16px;
margin-left: 3px;
}
li a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
height: 40px;
}
li a:hover{
background: RGBA (242, 88,. 6, 0.87);
border-RADIUS: 6px;
/ * set a moving element 4px, 8px * / when the mouse moved to lower right
Transform: Translate (4px, 8px);
-webkit-Transform : Translate (4px, 8px);
-o-Transform: Translate (4px, 8px);
-moz-Transform: Translate (4px, 8px);
/ * Transform: the translateX (4px) translateY, (8px); * /
}
</ style>
</ head>
<body>
<ul>
<li> <a href="#"> clothing city </a> </ li>
<li> <a href="#"> beauty shop </ a > </ Li>
<Li> <a href="#"> supermarket </a> </ Li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">金融</a></li>
</ul>
</body>
3, displacement in a direction
- translateX (tx): simply sets the X-axis displacement
transform: translate (100px, 0) is equivalent to the transform: translateX (100px)
- translateY (ty): simply sets the Y axis displacement
transform: translate (0,100px) is equivalent to the transform: translateY (100px)
2D Zoom
1, grammar
scale (sx);
sx: the amount of scaling coordinates transverse (width) direction
sy: the amount of scaling coordinates longitudinal (height) direction
2. Parameter Description
scale () function can receive only one value, two values may be received, only one value, the second value and a value equal to the default.
- scaleX (sx): simply sets the X-axis scale. transform: scale (2,0) == transform: scaleX (2)
- scaleY (sy): simply sets the Y-axis scale. transform: scale (0,2) == transform: scaleY (2)
3, the sample code
Other examples of 2D codes with codes displacement
a Li: hover {
background: RGBA (242, 88,. 6, 0.87);
border-RADIUS: 6px;
/ * set at a zoom element 1.5 into mouse display * /
Transform: Scale (1.5);
-webkit-Transform : Scale (for 1.5);
-moz-Transform: Scale (for 1.5);
-o-Transform: Scale (for 1.5);
}
2D tilt
1, grammar
skew (ax, ay);
ax: horizontal direction (X-axis) inclination angle (unit: deg, degree)
ay: vertical direction (Y-axis) inclination angle (unit: deg, degree)
2. Parameter Description
It may be provided only along an inclined X-axis or Y-axis direction:
- skewX (ax): simply sets the X-axis tilt
- skewY (ay): simply sets the Y-axis tilt
3, the sample code
Other examples of 2D codes with codes displacement
a Li: hover {
background: RGBA (242, 88,. 6, 0.87);
border-RADIUS: 6px;
/ * a element disposed inclined to the lower left corner when the mouse moved * /
Transform: skew (40 deg, -20deg);
- Transform-WebKit: skew (40 deg, -20deg);
-moz-Transform: skew (40 deg, -20deg);
-o-Transform: skew (40 deg, -20deg);
/ * Transform: the skewX (40 deg); * /
/ -webkit-Transform *: the skewX (40 deg); * /
/ * - of MOZ-Transform: the skewX (40 deg); * /
/ * - O-Transform: the skewX (40 deg); * /
}
2D rotation
1, grammar
rotate(a);
Units represented by a parameter used deg.
Parameter a takes a positive value when the element is rotated clockwise relative to the original center.
2, the sample code
<head lang="en">
<meta charset="UTF-8">
<title>rotate的使用</title>
<style>
div {
width: 300px;
margin: 40px auto;
text-align: center;
}
img:hover {
/*定义动画的状态，鼠标移入旋转并放大图片*/
transform: rotate(-90deg) scale(2);
-webkit-transform: rotate(-90deg) scale(2);
-moz-transform: rotate(-90deg) scale(2);
-o-transform: rotate(-90deg) scale(2);
}
</style>
</head>
<body>
<div>
<img src="image/tx.jpg" alt="img"/>
</div>
</body>
变形小结
- rotate( )函数只是旋转，而不会改变元素的形状
- skew( )函数是倾斜，元素不会旋转，会改变元素的形状
transition过渡
定义
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。
浏览器兼容性
- Firefox 4.0～15.0、Chrome 4.0～20.0、Safari 3.1～6.0和Opera 10.5～12.0，在这些浏览器中使用transition属性时需要添加不同的前缀。
- IE 10+、Firefox 16.0+、Chrome 26+、Safari 7.0+和Opera 12.1+，支持transition属性的标准语法，不需要添加浏览器的前缀。
语法
transition:[transition-property transition-duration transition-timing-function transition-delay ]
参数说明
- transition-property：过渡或动态模拟的CSS属性
- transition-duration：完成过渡所需要的时间
- transition-timing-function：指定过渡函数
- transition-delay：过渡开始出现的延迟时间
过渡属性（transition-property）
定义转换动画的CSS属性名称。语法：
transition-property: none|all| property;
过渡所需的时间（transition-duration）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）。
过渡动画函数（transition-timing-function）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
- ease：速度由快到慢（默认值）
- linear：速度恒速（匀速运动）
- ease-in：速度越来越快（渐显效果）
- ease-out：速度越来越慢（渐隐效果）
- ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
- 正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
- 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
- 0：默认值，元素过渡效果立即执行
过渡的触发机制
- 伪类触发
- ：hover
- ：active
- ：focus
- ：checked
- 媒体查询：通过@media属性判断设备的尺寸，方向等
- JavaScript触发：用JavaScript脚本触发
使用transition实现过渡动画的使用步骤
- 在默认样式中声明元素的初始状态样式
- 声明过渡元素最终状态样式，如悬浮状态
- 在默认样式中通过添加过渡函数，添加一些不同的样式
animation动画
简介
animation实现动画主要由两个部分组成
- 通过类似Flash动画的关键帧来声明一个动画
- 在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
浏览器支持
设置关键帧
语法
说明：
- 在Firefox 5.0～21、Chrome 4.0+、Safari 4.0+、Opera 12.0～15.0浏览器中使用@keyframes属性时需要添加浏览器前缀。
- IE 10+、Firefox 21+，支持@keyframes属性的标准语法，不需要添加前缀。
- 写兼容的时候浏览器前缀是放在@keyframes中间：
例如：@-webkit-keyframes、@-moz- keyframes。
调用关键帧
语法
参数说明
示例代码
<head lang="en">
<meta charset="UTF-8">
<title>animation的使用</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
/*调用动画*/
animation: spread 2s linear infinite;
-webkit-animation: spread 2s linear infinite;
-moz-animation: spread 2s linear infinite;
-o-animation: spread 2s linear infinite;
}
/*创建动画关键帧*/
@keyframes spread {
0%{
width: 0;
transform: translate(100px,0);
}
25%{
width: 20px;
transform: translate(200px,0);
}
50%{
width: 50px;
transform:translate(300px,0);
}
75%{
width: 70px;
transform:translate(200px,0);
}
100%{
width: 100px;
transform:translate(100px,0);
}
}
@-webkit-keyframes spread {
0%{
width: 0;
transform: translate(100px,0);
}
25%{
width: 20px;
transform: translate(200px,0);
}
50%{
width: 50px;
transform:translate(300px,0);
}
75%{
width: 70px;
transform:translate(200px,0);
}
100%{
width: 100px;
transform:translate(100px,0);
}
}
</style>
</head>
<body>
<div></div>
</body>