CSS Animations

by r2creations24

HTML

<div class = "test"> 
		  <h1>Sample Hover Animation</h1>
    </div>

CSS

:root {
	--random-bg: blue;
}

html {
	background-color: #004e5c;
	width: 100vw;
	height: 100vh;
}

body {
	color: whitesmoke;
  	background-color: #004e5c;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0;
}

.center {
	margin: auto;
}

.test {
	margin: auto;
}

h1 {
	padding: 15px;
	transition: all ease 2s;
}


h1::after {
	content: '';
    display: flex;
    width: 0%;
    margin: auto;
    justify-content: center;
    height: 5px;
	background-color: lightblue;
	transition: all ease 2s;
}

h1:hover {
	color: var(--random-bg);
	background-color: orchid;
	border-radius: 10px;
}

h1:hover::after {
	background-color: var(--random-bg);
	width: 100%;
	transition: all ease 2s;
}