CSS3过渡和动画
1、CSS3 2D变化:
translate()方法:
根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
例如:-webkit-transform: translate(50px,100px); ———<chrome>
是从左边元素移
动50
个像素,从顶部移动100
个像素
rolate()方法:
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转
例如:-webkit-transform: rotate(30deg);
是元素顺时针旋转30
度
scale()方法:
元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
例如:transform: scale(2,3);
表示宽度变大为2倍,高度变大为3倍
skew()方法:
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
例如:-webkit-transform: skew(30deg,20deg)
表示元素在X轴和Y轴上倾斜20
度和30
度
2、CSS3 2D变化:
rotateX()和rotateY()方法:
围绕其在一个给定度数X轴和Y轴旋转的元素
例如:-webkit-transform: rotateX(130deg)
表示绕着X轴旋转30度
3、CSS3 过渡
指定要添加效果的CSS属性
指定效果的持续时间
添加宽度变化的过渡:
- 指定添加的CSS属性:当用户鼠标悬停时,改变
div
属性的宽度:
div:hover
{
width:300px;
}
- 指定效果的持续时间(宽度变化):
div
{
transition: width 2s;
}
添加转换效果的过渡:
- 指定css属性:改变
div
的变化效果
transform:rotate(80deg);
- 指定效果的持续时间(转换效果),设置为
2s
:
transition:transform 2s
过渡属性:
transition: property duration timing-function delay;
四个参数分别为:css属性的name,过渡过程所需时间,过渡时间曲线,过渡开始的
延长时间,且这些属性可单独使用:
例如:transition-delay: 2s;
设置过渡开始的延长时间为2s
,当设置hover
属性时,仅当悬停在此2s
后才开始过渡
4、CSS3 动画:
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
创建@keyframes规则(绑定一个选择器):
规定动画的名称
规定动画的时长
例如:把 "myfirst
" 动画捆绑到 div
元素,时长:5
秒
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
定义动画的过程:
- from{ }to{ }方法:
例如设定背景从红色到黄色的动画:
@keyframes myfirst{
from {background:red;}
to {background:yellow;}
}
- 百分比来规定变化发生时间方法:
例如设定当动画为25%
及50%
时改变背景色,然后当动画100%
完成时再次改变
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
或者同时改变改变背景色和位置:
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
50% {background: blue; left:200px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
CSS3的动画属性:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
参数分别为:绑定的选择器名称、动画持续的秒数、动画的时间曲线、动画的启动前的延长时长、动画的播放次数、指定是否轮流反向播放动画、规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时)要应用到元素的样式、指定动画是否正在运行或已暂停
每个属性都可单独使用:
例如设定一个但鼠标悬停在div
上时暂停动画:
div:hover{
animation-play-state:paused
}