为什么转换css属性会在动画被解除时恢复？

为什么转换属性在停用时不会执行还原的动画？为什么转换css属性会在动画被解除时恢复？

我以为，当你取消transform它做恢复动画。

body { 
 
    background-color : #333333; 
 
} 
 

 
.corner { 
 
    background-color   : rgb(207, 207, 207); 
 
    border-bottom-right-radius: 100%; 
 
    height     : 50px; 
 
    left      : 0px; 
 
    position     : fixed; 
 
    top      : 0px; 
 
    width      : 50px; 
 
} 
 

 
.corner:hover { 
 
    transform : rotateX(180deg) rotateY(180deg) rotateZ(180deg); 
 
    transition: all .5s ease-in-out; 
 
} 
 

 
#top-right { 
 
    left  :auto; 
 
    right : 0px; 
 
    top  : 0px; 
 
    transform: rotate(90deg); 
 
} 
 

 
#bottom-left { 
 
    bottom :0; 
 
    left  :0px; 
 
    right : auto; 
 
    top  : auto; 
 
    transform: rotate(-90deg); 
 
} 
 

 
#bottom-right { 
 
    bottom :0px; 
 
    left  :auto; 
 
    right : 0px; 
 
    top  : auto; 
 
    transform: rotate(180deg); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Rentats Royo</title> 
 
    <link rel="stylesheet" href="css/styles.css"> 
 
    <style type="text/css"> 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="corner"></div> 
 
    <div class="corner" id="top-right"></div> 
 
    <div class="corner" id="bottom-left"></div> 
 
    <div class="corner" id="bottom-right"></div> 
 
</body> 
 
</html>

来源

2016-11-15 David Royo Virgili

@Ricky_Ruiz你有一个点瑞奇！谢谢你，你帮了我很多。 –

的问题是，所述transition属性在:hover伪类定义的，而不是在元件的正常状态被宣告。

您可以阅读post了解更多详情。

body { 
 
    background-color : #333333; 
 
} 
 

 
.corner { 
 
    background-color   : rgb(207, 207, 207); 
 
    border-bottom-right-radius: 100%; 
 
    height     : 50px; 
 
    left      : 0px; 
 
    position     : fixed; 
 
    top      : 0px; 
 
    width      : 50px; 
 
    transition    : all .5s ease-in-out; 
 
} 
 

 
.corner:hover { 
 
    transform : rotateX(180deg) rotateY(180deg) rotateZ(180deg); 
 
} 
 

 
#top-right { 
 
    left  :auto; 
 
    right : 0px; 
 
    top  : 0px; 
 
    transform: rotate(90deg); 
 
} 
 

 
#bottom-left { 
 
    bottom :0; 
 
    left  :0px; 
 
    right : auto; 
 
    top  : auto; 
 
    transform: rotate(-90deg); 
 
} 
 

 
#bottom-right { 
 
    bottom :0px; 
 
    left  :auto; 
 
    right : 0px; 
 
    top  : auto; 
 
    transform: rotate(180deg); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Rentats Royo</title> 
 
    <link rel="stylesheet" href="css/styles.css"> 
 
    <style type="text/css"> 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="corner"></div> 
 
    <div class="corner" id="top-right"></div> 
 
    <div class="corner" id="bottom-left"></div> 
 
    <div class="corner" id="bottom-right"></div> 
 
</body> 
 

 
</html>

来源

2016-11-15 18:45:02 Ricky

你确切地说，我很抱歉没有回应你，你真棒。 –

任何时候':-)'，你太棒了！ – Ricky

为什么转换css属性会在动画被解除时恢复？

回答

相关问题