CSS animation with keyframes and hover
I'm making my first website and I'm stuck. On page load I have an animation (elements come into place), but I also have: a hover scale in it. So the animation now works, but when I find it, it doesn't scale. The result I was looking for is on page load elements and then when you hover over them they expand.
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
transition: transform, scale 2s;
transform: translateY(-80px);
animation: come-in 2s;
animation-fill-mode: forwards;
}
top-header h1:hover {
transform: scale(1.05);
}
@keyframes come-in {
to {transform: translateY(0);}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width,initial-scale=1">
<title>Li-designs</title>
<meta name="description" content="Ignas Levinskas is young designer and web developer.">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"?>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:200,400,600,800" rel="stylesheet">
</head>
<body>
<header>
<div class="overlay">
<top-header>
<h1>Ignas Levinskas</h1>
<social-header>
<ul>
<li><a href="https://www.facebook.com/Ignasbelenkacia" target="_blank"><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></a></li>
<li><a href="https://www.instagram.com/burn_them_with_fire/" target="_blank"><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></a></li>
<li><a href="https://www.behance.net/li-designs" target="_blank"><i class="fa fa-behance" style="color:white" aria-hidden="true"> </i></a></li>
</ul>
</social-header>
</top-header>
<cover-content>
<h1>Welcome</h1>
<img src="images/logo.png" alt="Ignas Levinskas designs logo">
</cover-content>
</div>
</header>
<main>
</main>
</body>
</html>
+3
source to share
3 answers
You put rules in the wrong classes.
I changed them as follows:
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(1.05);
transition: scale 2s;
animation-fill-mode: forwards;
}
@keyframes come-in {
from {transform: translateY(-80px);}
to {transform: translateY(0);}
}
0
source to share
Any property used on an element: hover must be present on the element for it to depend on this property.
Here is your final working CSS.
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(2);
transform-origin: top left;
}
@keyframes come-in {
from { transform: translateY(-80px) scale(1);}
to {transform: translateY(0) scale(1);}
}
and a working example at codepen https://codepen.io/fearless23/pen/QgRMgb
0
source to share
top-header h1 {
animation-fill-mode: forwards;<---------------Remove
transform: translateY(-80px);<---------------Remove
//more code
}
@keyframes come-in {
from { transform: translateY(-80px);} <------------Added
to {transform: translateY(0);}
}
top-header h1 {
text-transform: capitalize;
color:red;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
transition: transform, scale 2s;
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(1.05);
}
@keyframes come-in {
from {transform: translateY(-80px);}
to {transform: translateY(0);}
}
top-header h1:hover {
transform: scale(1.5);
padding-left: 100px;
}
@keyframes come-in {
from { transform: translateY(-80px);}
to {transform: translateY(0);}
}
<header>
<div class="overlay">
<top-header class="x">
<h1>Ignas Levinskas</h1>
<social-header>
<ul>
<li><a href="https://www.facebook.com/Ignasbelenkacia" target="_blank"><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></a></li>
<li><a href="https://www.instagram.com/burn_them_with_fire/" target="_blank"><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></a></li>
<li><a href="https://www.behance.net/li-designs" target="_blank"><i class="fa fa-behance" style="color:white" aria-hidden="true"> </i></a></li>
</ul>
</social-header>
</top-header>
<cover-content>
<h1>Welcome</h1>
<img src="images/logo.png" alt="Ignas Levinskas designs logo">
</cover-content>
</div>
</header>
<main>
</main>
0
source to share