zoukankan      html  css  js  c++  java

  • css3 transition

    <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;
      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;
      100px;
      background:blue;
      color:yellow;
      }
      .trans3{
      -webkit-transition:0.5s ease;
      -moz-transition:0.5s ease;
      -webkit-transition-property:height;
      -moz-transition-property:height;
      100px;
      height:100px;
      background:green;
      color:#ccc;
      position:absolute;
      left:780px;
      top:50px;
       
      }
      .trans1:hover{
      300px;
      height:300px;
      }
      .trans2:hover{
      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>
  • 相关阅读:
    视频遮挡问题
    calc兼容性
    javascript变量声明提升
    jquery插件
    prop和attr在 jquery的
    onclick防止冒泡和json对象放入
    git 入门
    去掉ie滚动条兼容性
    单页面应用程序(SPA)
    swiper轮播图插件
  • 原文地址：https://www.cnblogs.com/guoyong-feng/p/6139612.html
Copyright © 2011-2022 走看看