为什么我的css过渡不起作用?
问题描述:
我已经查看了这个简单的代码约百次,转换属性工作得很好,但它只是捕捉到的地方,如果过渡属性不工作,我不停地点亮什么微小的细节? 这里jsfiddle的transform属性被注释掉了。 https://jsfiddle.net/t8kbtjdy/30/为什么我的css过渡不起作用?
#testItem{
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
transition: transform 1000ms ease-in-out 0ms;
}
答
你的情况的问题是你正在你的页面上加载你的元素在转换状态,所以没有什么可以转换到。
在下面的例子中我使用悬停改变旋转:
#testItem{
width: 100px;
height: 100px;
background-color: red;
transition: transform 1000ms ease-in-out 0ms;
}
#testItem:hover{
transform: rotate(45deg);
}
<div id="t2">
<div id="testItem"></div>
</div>
但是,如果你想看到你的页面加载,而不是你需要使用css animation
:hover
过渡
@keyframes rotateIt {
0% {
transform: rotate(0);
}
50% {
transform: rotate(45deg);
}
100% {
transform: rotate(0);
}
}
#testItem{
width: 100px;
height: 100px;
background-color: red;
animation: rotateIt 1s infinite;
}
<div id="t2">
<div id="testItem"></div>
</div>
答
我认为你应该使用S代替MS去。
Transition: all 1s ;
您可以将它修剪到您的需要当然。