前端开发

 首页 > 前端开发 > css教程 > css3过渡和动画的区别详解

css3过渡和动画的区别详解

分享到:
【字体:
导读:
         [导读] 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会按照这个过程执行

分享到:
CSS3文本换行word-wrap解决英文文本超过...
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行 这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制,让其看起来接近完美。 当CSS3出现的时候,我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。 一、word-wrap的语法 1、语法  复制代码 ...
利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 1280分辨率以上(大于1200px) @media screen and (min-width:1200px){     #page{ width: 1100px; }#content,.div1{width: 730px;}#se...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……