Today, I delved into the world of transitions and I must say, they are amazing and have great potential for future websites. Take a look at my current code:
I am looking to tweak the "return" transition of the circle/square so that the text appears to vanish as it passes over it, instead of the text awkwardly waiting to disappear only after the square is back in its original position.
Any suggestions on how to achieve this?
Check out my 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>
And here is the relevant 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;
}