CSS中transform\transition\animation

参考:http://www.cnblogs.com/aimyfly/p/3195898.html

1. transform

transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形
常用属性:

translateX/Y/Z 控制元素在页面上的三轴的位置
rotate(angel) 控制元素旋转角度
scaleX/Y/Z()控制元素放大缩小效果
skew(angel)控制元素倾斜角度

2.transition

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。
transition需要触发一个事件才会随着时间改变其CSS属性可用:hover

语法 transition: property duration timing-function delay;

transtion-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线 ease/ease-in/ease-out/ease-in-out-linear
transtion-delay 规定过渡效果何时开始

例子

      .app{
        width: 200px;
        height: 200px;
        background: red;
      }
      .app:hover{
        width: 300px;
        height: 400px;
        transition: all 0.6 ease;
      }

3.animation

语法：animation : name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画
例子

     .test1{
        width: 200px;
        height: 200px;
        background: red;
        animation: myfirst 0.5s ease;
      }
      @keyframes myfirst{
        from {background: red;}
        to {background: yellow;}
      }

这里写一下浏览器兼容8

@-moz-keyframes firefox

@-webkit-keyframes Safari和Chrome

@-o-keyframes Opera

火狐浏览器Mozilla Firefox 内核是Gecko
谷歌浏览器： Google Chrome一开始用的是苹果的webkit内核，后来用的是自己开创的blink内核
Opera：内核 blink
Safari：内核是自己的webkit
IE浏览器是微软出品的浏览器 Trident内核

关于运用动画的一个小例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
      list-style: none;
    }
    body{
      background-color: pink;
    }
    .taiji{
      height: 200px;
      width: 0;
      border-radius: 100px;
      border-left: 100px solid #000000;
      border-right: 100px solid #ffffff;
      animation: rotation 2.5s linear infinite;
    }
    .taiji::before{
      content: "";
      width: 100px;
      height: 100px;
      border-radius: 50px;
      position: absolute;
      left: -50px;
      box-shadow: 0 100px #000;
      background-color: #ffffff;
    }
    .taiji::after{
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background-color: #000000;
      box-shadow: 0 100px #fff;
      position: absolute;
      top: 40px;
      left: -10px;
    }
    @keyframes rotation{
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="taiji">
  </div>
</body>
</html>

CSS中transform\transition\animation

1. transform

2.transition

3.animation

猜你喜欢