css的过渡transition和动画animation

过渡

() 是 CSS3 的颠覆性功能之一，我们可以在元素从一种样式过渡到另一种样式时为元素添加效果，而无需使用 Flash 动画或 .

过渡动画：从一种状态逐渐过渡到另一种状态。老版本浏览器不支持，但不影响页面布局。通常与 :hover 一起使用。

属性

说明

取值范围

–

要应用过渡效果的 CSS 属性的名称

CSS 属性可以是 (all, width, color …)

–

过渡效果持续时间

秒和毫秒都可以，1s …

—

转场效果展示方式

（匀速），ease（慢启动，快中，慢结束，默认可省略）

-延迟

过渡效果延迟时间

秒和毫秒都可以，1s …

  div{
    width: 200px;
  　height: 100px;
    background-color: pink;
    transition: width 1s ease 0s,height 2s ease 1s;
    // transition:要过渡的属性    花费的时间   运动曲线    何时开始;
      
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
  }
  div:hover{
    width:400px;
  }

//完整代码块



	
	


  div {
    float: left;
    margin-right: 10px;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background-color: skyblue;
  }
 
  /* 鼠标悬停时改变盒子颜色 */
  div:hover {
    background-color: aqua;
    transition: all .8s linear 0s;
  }

动画

() 是将元素从一种样式逐渐更改为另一种样式的效果。

您可以随意更改任意数量的样式。

请以百分比形式指定更改发生的时间，或使用关键字“from”和“to”，相当于0%和100%。

0% 是动画的开始，100% 是动画的结束。

为了获得最佳浏览器支持，您应该始终定义 0% 和 100% 选择器。

值说明

-名称

指定需要绑定到选择器的名称。 .

–

指定完成动画所需的时间，以秒或毫秒为单位。

—

指定动画的速度曲线。

-延迟

指定动画开始前的延迟。

–计数

指定动画应该播放多少次。

–

指定动画是否应轮流反向播放。

-播放状态

指定动画是正在运行还是暂停。默认为“”。

-填充模式

指定动画时间之外的对象状态。

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

// 完整代码块



	
	


  div {
    float: left;
    margin-right: 10px;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background-color: skyblue;
    position: absolute;
    border-radius: 50%;
  }
  div {
    animation: myfirst 5s linear 2s infinite alternate;
  }
  @keyframes myfirst {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
  }