Issue
I want to change text using css. Not keep changing text but change text when user hovers over, so far I can do the whole thing, but the original text keeps been on the place even after the content is changed.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
.container{
height:500px;
width:500px;
background-color: red;
}
.child{
display: flex;
justify-content: center;
align-items: center;
height:50%;
width:50%;
background-color: blue;
transition: transform 1s ease-in;
}
.container:hover .child{
animation: the-animation 1s ease-in forwards;
}
.content:before{
content:"The text Before"
}
.container:hover .content:after{
content:"";
animation: change-text 1s forwards;
}
@keyframes change-text{
99%{
content: "This is the text";
}
100%{
content:"IT WORKS"
}
}
@keyframes the-animation{
0%{
height:250px;
width:250px;
}
100%{
height:500px;
width:500px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="child">
<span class="content"></span>
</div>
</div>
</body>
</html>
I want the end of the animation to look like "IT WORKS" and the start (when user isnt hovering) to look like "The text Before".
Solution
this is because the previous text is in ::before pseudoselector
and the modified text is in ::after pseudoselector.
❌ .container:hover .content:after { ... }
✅ .container:hover .content:before { ... }
so make the animation be done by the same pseudoelement where there is the text "The Text Before".
when you are using:afteryou have been using a new pseudoelement that isn't related to the other pseudoelement.
what I changed:
.content:before {
content: "The text Before"
}
.container:hover .content:before {
content: "";
animation: change-text 1s forwards;
}
the complete code:
.container {
height: 500px;
width: 500px;
background-color: red;
}
.child {
display: flex;
justify-content: center;
align-items: center;
height: 50%;
width: 50%;
background-color: blue;
transition: transform 1s ease-in;
}
.container:hover .child {
animation: the-animation 1s ease-in forwards;
}
.content:before {
content: "The text Before"
}
.container:hover .content:before {
content: "";
animation: change-text 1s forwards;
}
@keyframes change-text {
99% {
content: "This is the text";
}
100% {
content: "IT WORKS"
}
}
@keyframes the-animation {
0% {
height: 250px;
width: 250px;
}
100% {
height: 500px;
width: 500px;
}
}<div class="container">
<div class="child">
<span class="content"></span>
</div>
</div>
Answered By - Laaouatni Anas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.