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;
}

// 完整代码块



	
	animation


  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;}
  }


© 版权声明
THE END
喜欢就支持一下吧
点赞217 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片