如何使用CSS过渡

Question

嗨，朋友们，有人知道如何在Html页面中使用Css立方bezier吗

我已经尝试了ease-in effect 这里
它不工作。当页面加载时，帮助我给div一个方便的效果。
下面是我的css代码:

.container{width:100%;}
.Innerdiv{width:50%;-webkit-transition: all 1s cubic-bezier(.42, 0, 1, 1); 
-moz-transition: all 1s cubic-bezier(.42, 0, 1, 1); padding:30px;}

Html在这里

<div class="container">
        <div class="Innerdiv">
            <h1>
                What is Lorem Ipsum?
            </h1>
            <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
            </p>
        </div>
</div>

Answer 1

如果您希望在加载时发生过渡，我怀疑您需要使用动画而不是过渡。例如，如果你想让内部div从100%缩小到50%，而填充从0扩展到30px，你可以使用这样的css:

.container{
  width:100%;
}
.Innerdiv {
  animation:shrinkInner 1s;
  width:50%;
  padding:30px;
}
@keyframes shrinkInner {
  0% {
    width:100%;
    padding:0px;
  }
  100% {
    width:50%;
    padding:30px;
  }
}

这只是没有前缀的标准CSS -为了支持webkit，你需要在必要的地方添加webkit前缀。

包含前缀的小提琴示例

Answer 2

下面是一个简单的例子

div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}
div:hover {
    width: 300px;
} 

一开始你提到的转换到特定的类或id，然后你可以设置转换当你想要像:hover :active任何你想要的

转换属性是四个转换属性的简写:

1. transition-propert
2. transition-duration
3. transition-timing-function
4. transition-delay

更多信息请访问此处

你的代码:DEMO