Skip to content

Instantly share code, notes, and snippets.

@ivalexandru

ivalexandru/CSS_animatii1.html

Created August 4, 2018 13:08
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 ivalexandru/30ea97b25eb4f74918654bcb94a6eb76 to your computer and use it in GitHub Desktop.
Save ivalexandru/30ea97b25eb4f74918654bcb94a6eb76 to your computer and use it in GitHub Desktop.
Download ZIP
css_animatii
Raw
CSS_animatii1.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>Document</title>
<link rel="stylesheet" href="styles.css">
<style>
#ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: absolute;
left: 20%; /* daca pui top si aici si jos la keyframes, miscarea va fi de SUS in jos */
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 3s;
}
@keyframes fade {
50% {
opacity: 0.1;
left: 60%;
}
}
</style>
<script>
</script>
</head>
<body>
<h1>titlul<h1>
<div id="ball"></div>
<br>
<p>paragraful</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment