Как изменить «возврат» перехода в CSS?

Я только начал общаться с переходами сегодня, и я думаю, что они великолепны и могут иметь большой потенциал для будущих веб-сайтов. Это мой текущий код:Как изменить «возврат» перехода в CSS?

http://jsfiddle.net/Ldyyyf6n/

Я хочу, чтобы изменить «обратный» переход окружности/квадрат так, чтобы текст, кажется, идет невидимая, как она проходит назад над текстом вместо текста неловко ожидая исчезают, пока квадрат не вернется в исходное положение.

Как бы я это сделал?

Вот мой HTML:

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
    <div class="wrap"> 
     <div class="box2"> 
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
     </div> 
    <div class="box"></div> 
    </div> 
</body> 
</html>

И соответствующий CSS:

.box { 
    height: 100px; 
    width: 100px; 
    background: blue; 
    position: absolute; 
    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, border-radius 1s linear 0s, background 1s linear 0s; 
} 
.box2 { 
    height: 100px; 
    width: 83%; 
    padding: 10px; 
    position: absolute; 
    -webkit-box-sizing: border-box; 
    opacity: 0; 
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s; 
} 
.box2 span { 
    font-size: .90em; 
    margin-right: 10%; 
    float: left; 
    font-family: 'Georgia', sans-serif; 
} 

.wrap:hover .box { 
    border-radius: 50%; 
    margin-left: 73%; 
    background: coral; 
} 

.wrap:hover .box2 { 
    opacity: 1; 
}

источник

2014-08-28 ClaytonAlanKinder

Вы можете установить различные переходы для "парить над" и "парить из", например, так:

.box2 { 
    height: 100px; 
    width: 83%; 
    padding: 10px; 
    position: absolute; 
    -webkit-box-sizing: border-box; 
    opacity: 0; 
    /* This is the transition for "hover out". Note the shorter delay. */ 
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .2s; 
} 


.wrap:hover .box2 { 
    opacity: 1; 
    /* This is the transition for "hover". Note the longer delay. */ 
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s; 
}

WORKING EXAMPLE

источник

2014-08-29 00:08:33 showdev

T шляпа идеально! Спасибо огромное! – ClaytonAlanKinder

Как изменить «возврат» перехода в CSS?

ответ

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