码迷,mamicode.com
首页 > Web开发 > 详细

css3 transition

时间:2016-12-07 02:28:55      阅读:320      评论:0      收藏:0      [点我收藏+]

标签:idt   ati   设置   height   转化   webkit   web   one   hit   

<html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
   
  .trans1{
  -webkit-transition:0.5s ease;
  -moz-transition:0.5s ease;
  -webkit-transition-property:all;
  -moz-transition-property:all;
  position:absolute;
  left:10px;
  top:50px;
  height:100px;
  width:100px;
  background:#ef4900;
  color:white;
  }
  .trans2{
  -webkit-transition:0.5s ease-in-out;
  -moz-transition:0.5s ease-in-out;
  -webkit-transition-property:width;
  -moz-transition-property:width;
  position:absolute;
  left:350px;
  top:50px;
  height:100px;
  width:100px;
  background:blue;
  color:yellow;
  }
  .trans3{
  -webkit-transition:0.5s ease;
  -moz-transition:0.5s ease;
  -webkit-transition-property:height;
  -moz-transition-property:height;
  width:100px;
  height:100px;
  background:green;
  color:#ccc;
  position:absolute;
  left:780px;
  top:50px;
   
  }
  .trans1:hover{
  width:300px;
  height:300px;
  }
  .trans2:hover{
  width:300px;
  }
  .trans3:hover{
  height:300px;
  }
  </style>
  </head>
  <body>
  <div class="trans1">变换所有s属性</div>
  <div class="trans2">变换宽度属性</div>
  <div class="trans3">变换高度属性</div>
  <!-- transform呈现是一种变形结果,而transition呈现是一种过渡,通俗一点就是一种动画转化过程,如渐显,减弱、动画快慢等,transform,和transition是两种不同动画模型;
  1、transition的过渡属性:
  transition属性是一个间歇属性,用于设置四个过渡属性;
  语法
  transition:property duration timing-function delay;
  值描述transition-property规定设置过渡效果的css属性名称。
  transition-duration规定完成过渡效果需要的时间秒,或毫秒;
  transition-timing-function规定速度效果的速度曲线。
  transition-delay定义过渡效果何时开始
  transition-property;
  值:
  all:显示指对所有元素;
  none:表示没有元素;
  ident:制定css属性列表;
  注:请始终设置transition-duration属性,否则时长为0;就不会产生过渡效果,transform与transition此时效果一样
  transition:过渡属性名称 过渡时间 过度模式 ;
  transition-timing-function的五种值;
  1:ease逐渐变慢;
  2:liner:匀速;
  3:ease-in:缓慢开始(加速);
  4:ease-out:缓慢结束(减速);
  5:ease-in-out:缓慢开始,缓慢结束(先加速,或减速);
  6:cubic-bezier 贝赛尔曲线(mathewlein.com/easer);-->
  </body>
  </html>

css3 transition

标签:idt   ati   设置   height   转化   webkit   web   one   hit   

原文地址:http://www.cnblogs.com/guoyong-feng/p/6139612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!