旋转物体上的css动画

我对元素应用旋转，并将其悬停在其上，我应用动画。问题是，在悬停时，元素会回到其原始位置，然后生成动画，然后在动画之后它会回到旋转位置。我不希望这个元素回到原来的位置，但它应该保持在旋转的位置。还有一件事，我会改变从JavaScript的旋转，所以它不会被修复，因此它不应该是动画的一部分。这里是我的代码：旋转物体上的css动画

@-webkit-keyframes hvr-grow { 
 
    100% { 
 
    -webkit-transform: scale(1.4); 
 
    transform: scale(1.4); 
 
    } 
 
} 
 
@keyframes hvr-grow { 
 
    100% { 
 
    -webkit-transform: scale(1.4); 
 
    transform: scale(1.4); 
 
    } 
 
} 
 
.block{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    transform: rotate(45deg); 
 
    margin:30px; 
 
} 
 

 
.block:hover{ 
 
    -webkit-animation-name: hvr-grow; 
 
    animation-name: hvr-grow; 
 
    -webkit-animation-duration: 0.3s; 
 
    animation-duration: 0.3s; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
}

<div class="block"></div>

来源

2017-05-23 Abdullah Danyal

'我不希望这样的元件开始到原来的位置，但它应该在旋转position'动画??。你想让它在动画之后回到原来的位置？ –

NO。我不希望那个元素回到原来的位置。 –

你还应该包括关键帧旋转。这是你更新的小提琴。

@-webkit-keyframes hvr-grow { 
 
    100% { 
 
    -webkit-transform: rotate(45deg) scale(1.4); 
 
    transform: rotate(45deg) scale(1.4); 
 
    } 
 
} 
 
@keyframes hvr-grow { 
 
    100% { 
 
    -webkit-transform: rotate(45deg) scale(1.4); 
 
    transform: rotate(45deg) scale(1.4); 
 
    } 
 
} 
 
.block{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    transform: rotate(45deg); 
 
    margin:30px; 
 
} 
 

 
.block:hover{ 
 
    -webkit-animation-name: hvr-grow; 
 
    animation-name: hvr-grow; 
 
    -webkit-animation-duration: 0.3s; 
 
    animation-duration: 0.3s; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
}

<div class="block"></div>

来源

2017-05-23 08:32:05

我改变从JavaScript的旋转，所以它不会被修复，因此它不应该是动画的一部分。 –

@AbdullahDanyal如果这样的话。你把这个元素放在一个包装里面。使用javascript旋转元素。然后把包装上的悬停比例尺动画 –

这真的是个好主意:)我会尝试 –

嘿，我认为你应该使用JavaScript来获得这个效果，因为元素失去他：当您移动鼠标远离它，这就是为什么它会回伪类“悬停”。填充模式只适用于鼠标仍在元素上的情况。希望它会有所帮助。

段：

$("#block").hover(function() { 
 
    $("#block").addClass("rotate"); 
 
});

@-webkit-keyframes hvr-grow { 
 
    0% {} 
 
    100% { 
 
    -webkit-transform: scale(1.4) rotate(45deg); 
 
    transform: scale(1.4) rotate(45deg); 
 
    } 
 
} 
 

 
@keyframes hvr-grow { 
 
    0% {} 
 
    100% { 
 
    -webkit-transform: scale(1.4) rotate(45deg); 
 
    transform: scale(1.4) rotate(45deg); 
 
    } 
 
} 
 

 
#block { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    margin: 30px; 
 
} 
 

 
.rotate { 
 
    background-color: blue; 
 
    -webkit-animation-name: hvr-grow; 
 
    animation-name: hvr-grow; 
 
    -webkit-animation-duration: 0.3s; 
 
    animation-duration: 0.3s; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    animation-timing-function: ease-in-out; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="block"></div>

Link to codepen

来源

2017-05-23 09:02:57 OfftheCode

旋转物体上的css动画

回答

相关问题