想知道那些平滑的动态效果是怎么来的吗？带你玩点儿高级的~

最新推荐文章于 2024-04-20 17:16:45 发布

代码哒搬运工

最新推荐文章于 2024-04-20 17:16:45 发布

阅读量322

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45788388/article/details/106552175

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

transition属性，它是一个简写属性，包括四个属性，按顺序依次为：

transition-property ——发生过渡效果的属性名。
transition-duration——完成过渡效果需要的时间，单位是秒或者毫秒
transition-timing-function——过渡效果的转速曲线
transition-delay——设置过渡效果延迟多长时间开始，单位是秒或者毫秒

**transition-property属性值：**

all：所有属性都将获得过渡效果。
none：没有属性都获得过渡效果。
property：自定义应用过渡效果的属性，可以设置一个或多个属性名，多个属性名以逗号分隔。

transition-timing-function属性值：

linear：过渡从头到尾的速度是相同的。
ease：默认。过渡以低速开始，然后加快，在结束前变慢。
ease-in：过渡以低速开始。
ease-out：过渡以低速结束。
ease-in-out：过渡以低速开始和结束。
cubic-bezier(n,n,n,n)：立方贝塞尔曲线函数，可以在 cubic-bezier 函数中自己设置值。可能的值是从 0 到 1 的数值。

小例子：

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8">    
<title>css3-transition</title>

<style> 
  div
  {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    /*单独设置
    transition-property:width;
    transition-duration:2s;   
    */
  }

  div:hover
  {
    width:300px;
  }
</style>

</head>

<body>
  <div></div>
</body>

</html>

transition与animation区别：

1、ransition只能做简单的动画，animation可以做比较复杂的动画；
2、transition不能自动执行，需要:hover伪类或者js事件来触发执行，animation可以自动执行；
3、transition触发后只执行一次，不能重复发生，除非再次触发，animation可以执行多次，甚至无限循环；
4、transition 只有两帧，只能设置动画初始值和结束值，animation可以设置多帧。

这个你学会了吗，如果想看动态的效果或者是视频的话，可以微信搜索公众号：“刘小妞的栖息地”或者识别下图的二维码，感谢大家的支持。

在这里插入图片描述