CSS3 Transitions(基础)

Step1:Link transitions 开头,我们做一些基础的练习:当指上文字的时候,改变其颜色! 代码如下: .case1 a{ color:#333; -w...
Step1:Link transitions
开头,我们做一些基础的练习:当指上文字的时候,改变其颜色!
代码如下:
.case1 a{    color:#333;    -webkit-transition:color 500ms ease-in;}.case1 a:hover{    color:#F30;}
但是需要注意的是-webkit-transition只能在webkit为引擎的浏览器中,或者说Safari和Chrome。幸运的是现在主流浏览器都已经支持transition。我们只需要把代码改一下:
a{    color:#333;    transition:color 500ms ease-in;    -moz-transition:color 500ms ease-in;    -o-transition:color 500ms ease-in;    -webkit-transition:color 500ms ease-in;}
要注意,在这个教程中,我们将关注在webkit的实现。在声明属性之后, 值为”color 500ms ease-in”。这三个值分别代表:
1、过渡的是哪个属性(例子中的color);
2、过渡的时间(例子中用的的是500ms,我们也可以用s单位);
3、过渡类型(例子中是的’ease-in’渐进);
在这个例子中我们使用提ease-in,开始的时候缓慢,并加速进入过渡后样式。

Step 2 – Background Transitions
其他基础应用:当你input框获得焦点的时候改背景颜色。
代码如下:
input{    width:300px;    height:30px;    line-height:30px;    font-size:14px;    background-color:#fff;    transition:background-color 1s ease;    -moz-transition:background-color 1s ease-in    -o-transition:background-color 1s ease;    -webkit-transition:background-color 1s ease;    }input:focus{    background-color:#FF6;}
 Step 3 – Transitioning改变多个属性
正确的使用css3 transition发展鼠标悬停(鼠标指上),在支持CSS3的浏览器中可以带来更好的体验。
更进一步,我们可以把普能的transition修改成一次改变多个CSS属性。
代码如下:
a{    display:block;    text-decoration:none;}a .txtblock{    width:100%;    text-align:center;    height:30px;    line-height:30px;    font-size:14px;    color:#333;    background-color:#fcfcfc;    transition-property:color,background-color;    -moz-transition-property:color,background-color;    -webkit-transition-property:color,background-color;    -o-transition-property:color,background-color;    transition-duration:1s,1s;    -moz-transition-duration:1s,1s;    -o-transition-duration:1s,1s;    -webkit-transition-duration:1s,1s;    transition-timing-function:linear,ease-in;    -moz-transition-timing-function:linear,ease-in;    -o-transition-timing-function:linear,ease-in;    -webkit-transition-timing-function:linear,ease-in;}a:hover .txtblock{    color:#F00;    background-color:#FF9;}
这次当鼠标悬停(指上)的时候,背景和文字颜色都改变了。所有我们可以使用transition同时改变两个CSS属性。
我们只是把transition分隔一下:首先我们使用”transition-property“,然后使用逗号把CSS属性分开;所以我们同时要改变的分别是背景和文字颜色。
首先我们使用transition-property设定要改变的CSS属性:transition-property:color,background-color;
再使用transition-duration设计CSS属性分别的过渡时间:transition-duration:1s,1s;
这些引用中的顺序都是和第一条中的相同,但是这里的过渡时间都是只设置为了1秒。
最后我们设置了transition-timing-function(定时功能),第一个,我们设置了linear(线性,表示匀速),这个涉及到文字颜色,第二是涉及到背景。
因此,我们设置了文字颜色改变为linear(线性)在1秒内,设置了背景改变为ease-in(渐进)在同一个时间内:
transition-timing-function:linear,ease-in;

Step 4 – Putting the Pieces Together
CSS3transitions开始时成为有自身特点时是和新的CSS属性是相结合的。
让我们来创建一个简单的一个弹出标志的动画;



首先我们创建一个路标框,并确定是它是在背景下的相对定位:
.signpost{    width:50px;    height:300px;    position:relative;    margin:0 auto;    padding-top:100px;}
然后路将路标杆放置在第二层,让它在路标牌的上边:
#post{    width:50px;    height:300px;    position:relative;    z-index:2;}
现在我们添加路标牌,让它在路标杆的下层,并使用CSS3 transform改变它的属性:
#sign{    width:100px;    height:50px;    position:absolute;    left:50px;    top:100px;    z-index:1;    -webkit-transform-origin:0 0;    -webkit-transform:rotate(86deg);    -webkit-transition:-webkit-transform 1s ease-in-out;    -moz-transform-origin:0 0;    -moz-transform:rotate(86deg);    -moz-transition:-moz-transform 1s ease-in-out;}
旋转路标牌是使用-webkit-transform: rotate(86deg),并且被放放置在路标杆层下方。为了确保路标牌有合适的旋转点,我们使用了transform origin将旋转点设置为top和left都为0。



我们设置当鼠标悬停(指上)的时候,过渡时间为1秒,使路标牌旋转到原来的位置:
.signpost:hover #sign{    -webkit-transform:rotate(0deg);    -moz-transform:rotate(0deg);}
我们把悬停做成.signpost:hover,而不是做到#sign本身。

Step 5 – Introducing Animations

现在我们可以把学东西结合起来。使用webkit animations,这个为我们提供了如连续播放动画的方法。
首先,我们要创建两个图标,然后把他们放到div中,就像我们之前做路标那样:
<div class="animations">    <img id="out" src="images/out.png" />    <img id="in" src="images/in.png" /></div>.animations{    width:180px;    height:180px;    margin:0 auto;    margin-top:100px;    position:relative;    background-color:#CCC;}#out{    width:180px;    height:180px;    position:absolute;    left:0;    top:0;    z-index:1;}#in{    width:90px;    height:90px;    position:absolute;    top:45px;    left:45px;    z-index:2;}
现在我们要定义动画,我们要从两个相反的方向旋转圆,所以我们要定义两个动画:
@-webkit-keyframes outball{    from{        -webkit-transform:rotate(0deg);    }to{        -webkit-transform:rotate(360deg);    }}@-webkit-keyframes inball{    from{        -webkit-transform:rotate(0deg);    }to{        -webkit-transform:rotate(-360deg);    }}
动画里给出了名字作为参照,这里他们的名字是“outball”和“inball”(动画的名称可以自己随便取的)。然后我们分配一个初始值和一个最终值,让图片旋转起来从0度到360度和0度到-360度。
现在我们给这个动画悬停状态。请注意,如果我们分配到正常状态,动画会立即运行在页面加载时。
.animations:hover #out{    -webkit-animation-name:outball;    -webkit-animation-iteration-count:infinite;    -webkit-animation-timing-function:linear;    -webkit-animation-duration:3s;}.animations:hover #in{    -webkit-animation-name:inball;    -webkit-animation-iteration-count:infinite;    -webkit-animation-timing-function:linear;    -webkit-animation-duration:5s;}
我们先调用之前创建的动画(-webkit-animation-name:outball)然后我们设定动画运行的次数(-webkit-animation-iteration-count:infinite)infinite表示无限大,就是不停重复的播放,这里也可以写成数字的1 2 3 。
接下来我们设置动画播放方法(-webkit-animation-timing-function:linear)和时间(-webkit-animation-duration:3s)。