网站地图    收藏   

主页 > 前端 > css3 >

css3过渡和动画的区别详解

来源:未知    时间:2016-12-30 10:22 作者:xxadmin 阅读:

[导读] CSS3 过渡 CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素: 也就是说我们设置好元素过渡后,突然间改变元素...

CSS3 过渡

CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素:

也就是说我们设置好元素过渡后,突然间改变元素的属性,它会缓慢的过渡过去,

列入下面方法,当突然改变元素宽度时候,它会2秒后变成你改变的值

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

CSS3 动画

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

动画是预设置好动画过程,css3会按照这个过程执行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论