BojoDimov · June 8, 2018 11:11
diff --git a/animations.html b/animations.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Animations</title>
 </head>

 <body>
  <style>
    .button {
      border: 1px solid rgb(12, 126, 202);
      border-radius: 8px;
      color: rgb(12, 126, 202);
      width: 8em;
      height: 2em;
      display: block;
      padding-top: 1em;
      text-align: center;
    }

    p {
      animation: .5s ease-out init;
    }

    .button:hover {
      cursor: pointer;
      color: white;
      background-color: rgb(12, 126, 202);
      animation: .15s ease-in test;
    }

    @keyframes test {
      0% {
        background-color: white;
        color: rgb(12, 126, 202);
      }
      100% {
        background-color: rgb(12, 126, 202);
        color: white;
      }
    }

    @keyframes init {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
  <div class="button">click</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend, neque sed pretium sagittis, nulla orci lacinia erat,
    ornare hendrerit ante mauris et nibh. Mauris augue dolor, tempor non ex non, placerat viverra purus. Mauris a suscipit
    arcu, ut ornare mi. Integer eu felis enim. In at scelerisque ante. Nulla sollicitudin dignissim odio, non porttitor metus
    condimentum ut. Etiam ac sodales neque, ac venenatis sapien. Aliquam tincidunt condimentum ligula, quis cursus lorem
    ultricies id. Nam ullamcorper nec velit eu rutrum. Suspendisse elementum mollis sapien, efficitur laoreet quam congue
    id. Etiam et ultrices magna. Sed quis diam sed dolor eleifend viverra. Proin dui velit, consequat tincidunt eros vitae,
    consectetur accumsan arcu. Pellentesque augue massa, elementum ac viverra fermentum, aliquet ac mauris. Praesent ac nulla
    quis leo posuere luctus nec sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Nulla venenatis pharetra sapien. Cras vehicula mauris mauris. Suspendisse ut eros ac orci scelerisque dignissim.
    In sagittis accumsan sem. Sed vulputate congue ante, vel pharetra odio semper nec. Nam fringilla laoreet massa eget scelerisque.
    Duis pellentesque a ligula vitae varius. Donec ac pharetra velit, et rutrum elit. Curabitur convallis sem turpis, elementum
    maximus neque pellentesque vel. Vestibulum urna ante, venenatis quis ligula eget, molestie vestibulum nisi. Nulla a molestie
    leo. Morbi ut placerat enim, non cursus tellus. Fusce scelerisque metus vel porttitor sollicitudin. Nullam posuere ex
    est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vel egestas nibh, fermentum
    fermentum quam. Maecenas interdum viverra ipsum, et laoreet dui elementum sit amet. Duis consectetur eget leo id aliquet.
    Phasellus ex leo, porta vel consequat a, eleifend eget urna. Morbi et turpis at lacus tincidunt euismod vitae non elit.
    Nunc vitae interdum lorem. Proin eu tortor eget turpis tristique dictum. Sed iaculis magna at consequat elementum. Maecenas
    quis pretium leo, ut vulputate velit. Mauris accumsan tellus nibh, quis hendrerit sem pharetra id. Curabitur feugiat
    interdum diam, efficitur aliquam tellus. Donec gravida, risus vitae egestas vestibulum, magna elit molestie metus, condimentum
    rhoncus ligula massa ut lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Animations</title>
	</head>

	<body>
	<style>
	.button {
	border: 1px solid rgb(12, 126, 202);
	border-radius: 8px;
	color: rgb(12, 126, 202);
	width: 8em;
	height: 2em;
	display: block;
	padding-top: 1em;
	text-align: center;
	}

	p {
	animation: .5s ease-out init;
	}

	.button:hover {
	cursor: pointer;
	color: white;
	background-color: rgb(12, 126, 202);
	animation: .15s ease-in test;
	}

	@keyframes test {
	0% {
	background-color: white;
	color: rgb(12, 126, 202);
	}
	100% {
	background-color: rgb(12, 126, 202);
	color: white;
	}
	}

	@keyframes init {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	</style>
	<div class="button">click</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend, neque sed pretium sagittis, nulla orci lacinia erat,
	ornare hendrerit ante mauris et nibh. Mauris augue dolor, tempor non ex non, placerat viverra purus. Mauris a suscipit
	arcu, ut ornare mi. Integer eu felis enim. In at scelerisque ante. Nulla sollicitudin dignissim odio, non porttitor metus
	condimentum ut. Etiam ac sodales neque, ac venenatis sapien. Aliquam tincidunt condimentum ligula, quis cursus lorem
	ultricies id. Nam ullamcorper nec velit eu rutrum. Suspendisse elementum mollis sapien, efficitur laoreet quam congue
	id. Etiam et ultrices magna. Sed quis diam sed dolor eleifend viverra. Proin dui velit, consequat tincidunt eros vitae,
	consectetur accumsan arcu. Pellentesque augue massa, elementum ac viverra fermentum, aliquet ac mauris. Praesent ac nulla
	quis leo posuere luctus nec sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
	Curae; Nulla venenatis pharetra sapien. Cras vehicula mauris mauris. Suspendisse ut eros ac orci scelerisque dignissim.
	In sagittis accumsan sem. Sed vulputate congue ante, vel pharetra odio semper nec. Nam fringilla laoreet massa eget scelerisque.
	Duis pellentesque a ligula vitae varius. Donec ac pharetra velit, et rutrum elit. Curabitur convallis sem turpis, elementum
	maximus neque pellentesque vel. Vestibulum urna ante, venenatis quis ligula eget, molestie vestibulum nisi. Nulla a molestie
	leo. Morbi ut placerat enim, non cursus tellus. Fusce scelerisque metus vel porttitor sollicitudin. Nullam posuere ex
	est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vel egestas nibh, fermentum
	fermentum quam. Maecenas interdum viverra ipsum, et laoreet dui elementum sit amet. Duis consectetur eget leo id aliquet.
	Phasellus ex leo, porta vel consequat a, eleifend eget urna. Morbi et turpis at lacus tincidunt euismod vitae non elit.
	Nunc vitae interdum lorem. Proin eu tortor eget turpis tristique dictum. Sed iaculis magna at consequat elementum. Maecenas
	quis pretium leo, ut vulputate velit. Mauris accumsan tellus nibh, quis hendrerit sem pharetra id. Curabitur feugiat
	interdum diam, efficitur aliquam tellus. Donec gravida, risus vitae egestas vestibulum, magna elit molestie metus, condimentum
	rhoncus ligula massa ut lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</body>

	</html>