CSSTransitionsAnimations - 03 - Exercise

csstransitionsanimations-03-exercise.markdown

CSSTransitionsAnimations - 03 - Exercise

A Pen by Abdoul Aziz BA on CodePen.

License.

index.html

<h1>Exercise 3</h1>
Apply a 1 second transition to the width property of the div one.

Apply also a 1 second transition to the width property of the div two, but make sure the animation starts only after the div one has stopped. (hint: use delay)
<div id="main">
	<div class="one"></div><br>
	<div class="two"></div>
</div>

<p>Hover over the div element above.</p>

style.css

div.one {
	transition: width 1s ease-in-out;
	width: 100px;
	height: 100px;
	background: red;
}

div.two {
	width: 100px;
	height: 100px;
	background: blue;
	transition: width 1s ease-in-out 1s;
}

div#main:hover .one {
	width: 300px;
}

div#main:hover .two {
	width: 300px;
}