Skip to content

Instantly share code, notes, and snippets.

@BojoDimov

BojoDimov/animations.html

Created June 8, 2018 11:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BojoDimov/9a4e9405ecd9ef47e98dfe580873d05b to your computer and use it in GitHub Desktop.
Save BojoDimov/9a4e9405ecd9ef47e98dfe580873d05b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment