Почему переход 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 У вас есть точка Ricky! Спасибо, ты мне очень помог. –

Проблема состоит в том, что 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-свойства не возвращает анимацию, когда она не открыта?

ответ

Смежные вопросы