最近打算学习css3知识，觉得css3写出来的效果好炫好酷，之前一直想要学习来着。可能之前的决心，毅力，耐心不够，所以想要重整起来，放下浮躁的心态，一步一个脚印，踏踏实实的来学习。

首先学习的是css3 transition属性，该属性的定义为从一个属性值平滑过渡到另一个属性值。

格式为：transition:<过度属性名> <过度时间> <过度模式>，或
transition-property:<过度属性名>
transition-duration:<过度时间>
transition-timing-function:<过度模式>

注意，由于各浏览器之间的兼容性差异，针对各浏览器写的css3样式都要加上前缀，如：

-webkit-: /*chrome,safari*/

-moz-: /*firebox*/

-ms: /*IE*/

-o-: /*opera*/

如下，举个例子，代码示例：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>个人网站首页</title>

  <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script>

  <style>

    .block{

      width:400px;

      height:400px;

      background-color:blue;

      -webkit-transition: background-color 3s;

    }

    .block:hover{

      background-color:red;

    }

    .progress-bar{

      width: 40px;

      height: 40px;

      background-color: blue;

    }

    .progress-bar:hover{

      width: 960px;

    }

    #bar1{

      -webkit-transition: width 3s ease;

    }

    #bar2{

      -webkit-transition: width 3s linear;

    }

    #bar3{

      -webkit-transition: width 3s ease-in;

    }

    #bar4{

      -webkit-transition: width 3s ease-out;

    }

    #bar5{

      -webkit-transition: width 3s ease-in-out;

    }

    #expermient{

      -webkit-perspective:800px;

      -webkit-perspective-origin:50% 50%;

      -webkit-transform-style:preserve-3d;

    }

    #blocks{

      width: 500px;

      height: 500px;

      background-color: blue;

      margin: 0 auto;

      -webkit-transform:rotateX(45deg);

    }

    .hw-cbg.on p{

      padding:0px 0 0 30px;

      -webkit-transition:padding-left 2s ease;

    }

    .hw-cbg p{

      padding: 30px 0 0 0;

    }

    .animation{

      width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:mymove 5s infinite;

    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

    }

    @-webkit-keyframes mymove{

      0% {margin-left: 0px;background-color: blue;}

      50% {margin-left: 30px;}

      100% {margin-left: 60px;}

    }

  </style>

 </head>

 <body>

  <!--说明：

   transition:从一个属性值平滑过渡到另一个属性值，格式为：transition:<过度属性名> <过度时间> <过度模式>，或

   transition-property:<过度属性名>

   transition-duration:<过度时间>

   transition-timing-function:<过度模式>

   -->

    <div class='block'></div>

    <div class="wrape">

        <p>ease</p>

        <div class="progress-bar" id="bar1"></div>

        <p>linear</p>

        <div class="progress-bar" id="bar2"></div>

        <p>ease-in</p>

        <div class="progress-bar" id="bar3"></div>

        <p>ease-out</p>

        <div class="progress-bar" id="bar4"></div>

        <p>ease-in-out</p>

        <div class="progress-bar" id="bar5"></div>

    </div>

    <div id='expermient'>

       <div id="blocks"></div>

    </div>

    <div class="hw-cbg">

        <p>在节奏紧张的都市生活中，高效便携会让您的生活化繁为简。HUAWEI MateBook配备12英寸屏幕的<br>

          金属机身，重量仅为640g，厚度低至6.9mm。内在强大，彰显锐意与品质的交融；<br>

          轻薄时尚，是您工作生活的称心伴侣。</p>

    </div>

    <script>

     $(document).ready(function(){

          $('.hw-cbg').addClass('on');

     })

    </script>

    <div class="animation"></div>

 </body>

</html>

css3 transition属性的更多相关文章

  1. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  2. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  3. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  4. css3——transition属性和opacity属性

    [transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过 ...

  5. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  6. CSS3 transition 属性

    transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦 ...

  7. CSS3 transition 属性 过渡效果

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...

  8. CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速

    ease: 1.ease:(逐渐变慢)默认值 2.linear:(匀速) 3.ease-in:(加速) 4.ease-out:(减速) 5.ease-in-out:(加速然后减速) 6.cubic-b ...

  9. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

随机推荐

  1. .NET面试题系列[5] - 垃圾回收：概念与策略

    面试出现频率:经常出现,但通常不会问的十分深入.通常来说,看完我这篇文章就足够应付面试了.面试时主要考察垃圾回收的基本概念,标记-压缩算法,以及对于微软的垃圾回收模板的理解.知道什么时候需要继承IDi ...

  2. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

  3. 在 Linux 中使用搜狗拼音输入法以及搞定 Flash 和支付宝

    在 Ubuntu 中安装搜狗输入法 在 Ubuntu Kylin 系统中,默认安装搜狗拼音输入法,但是在原生 Ubuntu 系统中则不是.这可以理解,毕竟搜狗输入法的 Linux 版有 Kylin 团 ...

  4. Android点击列表后弹出输入框，所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  5. Android 打开方式选定后默认了改不回来?解决方法(三星s7为例)

    Android 打开方式选定后默认了改不回来?解决方法(三星s7为例) 刚刚在测试东西,打开一个gif图,然后我故意选择用支付宝打开,然后...支付宝当然不支持,我觉得第二次打开它应该还会问我,没想到 ...

  6. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  7. .NET Core全新的配置管理[共9篇]

    提到“配置”二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化的配置信息定义在这两 ...

  8. 定时管理器框架-Task.MainForm

    入住博客园4年多了,一直都是看别人的博客,学习别人的知识,为各个默默无私贡献自己技术总结的朋友们顶一个:这几天突然觉得是时候加入该队列中,贡献出自己微弱的力量,努力做到每个月有不同学习总结,知识学习的 ...

  9. 设置MYSQL允许用IP访问

    mysql>use mysql; mysql>update user set host = '%'  where user ='root'; mysql>flush privileg ...

  10. 使用OWIN作为WebAPI的宿主

    前言 好吧,也没什么好说的,就是个技术的总结,直接生成MVC的项目,感觉好重,虽然各种东西很全 ...也许我是处女座? - -, OWIN呃,这里我就不解释了,自己也是一知半解,可以参考 Open W ...