css3动画和过渡

css3动画和过渡部分

CSS3的“过渡”(transition)属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果,让某些效果变得更加具有流线性与平滑性。CSS3的“动画”(animation)属性能够实现更复杂的样式变化以及一些交互效果,而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现,使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示,而是通过简单的方法使页面元素动了起来,实现了元素从静到动的变化 。

虽然说我们有其他手段实现动态的操作,但是直接使元素从静态到动态也应该是很大的突破。

动画:

CSS3动画是什么?
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器

首先要做的,是把动画和盒子绑定起来,在@-webkit-keyframes创建动画后。然后就是规定动画的名称和时长。如果不规定时长的话。默认时长是0,也就是说我们将看不到任何效果。

div                                                 /* Safari 与 Chrome */
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; 
}
@-webkit-keyframes myfirst 
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

(代码来源于菜鸟教程)
以上代码实现了在五秒之内把一个div连续变色的功能。

过渡

CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript就能实现,他就是过渡效果。
要实现这一点,必须规定

  • 指定要添加效果的css属性;
  • 制定效果持续时间。
div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); 
 }
style>
head>
<body>

以上代码可以在鼠标移动到div时实现改变宽高,旋转等操作。
如上例,要加多个变换效果,属性要用逗号分隔。
(以上代码均用chrome测试)

你可能感兴趣的:(css3)