:hover/:active doesn't work after animation-CodePudding

After the slideIn animation the buttons don't set the cursor to pointer and don't do anything that was coded in the :hover/:active.

My goal is to have the button effects after the animation.

here is an example where the button effects don't work after the animation:

div{
    display: block;
}

.content{
    position: absolute;
    background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
    opacity: 95%;
    top: 50%;
    left: 50%;
    padding: 80px 100px;
    transform: translate(-50%, -50%);
    border-radius: 3em;
    text-align: center;
}

h1{
    font-size: 500%;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    font-size: 200%;
}

ul{
    padding: 0px;
    list-style: none;
}
.btn{
    display: inline-block;
    width: 500px;
    margin: 6px;
    padding: 15px;
    border: 0px;
    border-radius: 3em;
    background-color: black;
    color: white;
    transition: 0.1s;
    box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}

#btn1{
  opacity: 0;
  animation: slideIn 1.5s 2s 1 ease-out forwards;
}

.btn:hover{
    transform: translateY(-2px);
    transition: 0.3s;
}

.btn:active{
    transform: scale(0.95);
}


span{
    font-size: 32px;
    display: inline-block;
}

@keyframes slideIn {
  0% {
    opacity: 1;
    transform: translateX(-900px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Question 1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="../css/style.css" rel="stylesheet" type="text/css"/> 
    </head>
    <body>
        <section>
            <div >
                <h1>Question 1</h1>
                <h2>How many times does the earth fit in<br/> the sun?</h2>
                <ul id="questions">
                    <li>
                        <a href="Question 2.xhtml">
                            <button id="btn1" >
                                <span>
                                    1300000
                                </span>
                            </button>  
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </body>
</html>

Here is an example without animation where the button effects do work:

body{
  background-image: url("../img/bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

div{
    display: block;
}

.content{
    position: absolute;
    background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
    opacity: 95%;
    top: 50%;
    left: 50%;
    padding: 80px 100px;
    transform: translate(-50%, -50%);
    border-radius: 3em;
    text-align: center;
}

h1{
    font-size: 500%;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    font-size: 200%;
}

ul{
    padding: 0px;
    list-style: none;
}
.btn{
    display: inline-block;
    width: 500px;
    margin: 6px;
    padding: 15px;
    border: 0px;
    border-radius: 3em;
    background-color: black;
    color: white;
    transition: 0.1s;
    box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}

.btn:hover{
    transform: translateY(-2px);
    transition: 0.3s;
}

.btn:active{
    transform: scale(0.95);
}


span{
    font-size: 32px;
    display: inline-block;
}

<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Question 1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="../css/style.css" rel="stylesheet" type="text/css"/> 
    </head>
    <body>
        <section>
            <div >
                <h1>Question 1</h1>
                <h2>How many times does the earth fit in<br/> the sun?</h2>
                <ul id="questions">
                    <li>
                        <a href="Question 2.xhtml">
                            <button id="btn1" >
                                <span>
                                    1300000
                                </span>
                            </button>  
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </body>
</html>

CodePudding user response：

Okay so a few problems here. You are trying to animate transform properties on hover and with the animation property.

the way i would solve this is by adding a container to the button where you would add the intro animation. Then add the hover animation to the button.

heres an

<section>
<div >
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br /> the sun?</h2>
<ul id="questions">
  <li>
    <a href="Question 2.xhtml">
      <div >
        <button >
          <span>
            1300000
          </span>
        </button>
      </div>
    </a>
  </li>
</ul>
</div>
</section>

and then

.content {
  position: absolute;
  background: linear-gradient(-45deg, #2e3192, #1bffff);
  opacity: 95%;
  top: 50%;
  left: 50%;
  padding: 80px 100px;
  transform: translate(-50%, -50%);
  border-radius: 3em;
  text-align: center;
}

h1 {
  font-size: 500%;
  font-family: monospace;
  margin-top: 10px;
  margin-bottom: 10px;
}
h2 {
  font-size: 200%;
}

ul {
  padding: 0px;
  list-style: none;
}
.button-container {
  animation: slideIn 1.5s 1 ease-out forwards;
}
.btn {
  position: relative;
  display: inline-block;
  width: 500px;
  margin: 6px;
  padding: 15px;
  border: 0px;
  border-radius: 3em;
  background-color: black;
  box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.1s;
  color: white;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
  transition-duration: 0.3s;
}

.btn:active {
  transform: scale(0.95);
}

span {
  font-size: 32px;
  display: inline-block;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-900px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

CodePudding user response：

These styles work.
(I changed the animation-fill-mode to none, and moved the opacity: 0 to the @keyframes). The problem was that the transform on the :hover was being overridden by the @keyframes, so changing the fill-mode fixed that.

div{
    display: block;
}

.content{
    position: absolute;
    background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
    opacity: 95%;
    top: 50%;
    left: 50%;
    padding: 80px 100px;
    transform: translate(-50%, -50%);
    border-radius: 3em;
    text-align: center;
}

h1{
    font-size: 500%;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    font-size: 200%;
}

ul{
    padding: 0px;
    list-style: none;
}
.btn{
    display: inline-block;
    width: 500px;
    margin: 6px;
    padding: 15px;
    border: 0px;
    border-radius: 3em;
    background-color: black;
    color: white;
    transition: 0.1s;
    box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}

#btn1{
  animation: slideIn 1.5s 1 ease-out none;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-900px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.btn:hover{
    transform: translateY(-2px);
    transition: 0.3s;
}

.btn:active{
    transform: scale(0.95);
}


span{
    font-size: 32px;
    display: inline-block;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Question 1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="../css/style.css" rel="stylesheet" type="text/css"/> 
    </head>
    <body>
        <section>
            <div >
                <h1>Question 1</h1>
                <h2>How many times does the earth fit in<br/> the sun?</h2>
                <ul id="questions">
                    <li>
                        <a href="Question 2.xhtml">
                            <button id="btn1" >
                                <span>
                                    1300000
                                </span>
                            </button>  
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </body>
</html>

CodePudding user response：

Apply display: block; to the a tag around the button to make the whole button surface be a link:

div{
    display: block;
}

.content{
    position: absolute;
    background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
    opacity: 95%;
    top: 50%;
    left: 50%;
    padding: 80px 100px;
    transform: translate(-50%, -50%);
    border-radius: 3em;
    text-align: center;
}

h1{
    font-size: 500%;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    font-size: 200%;
}

ul{
    padding: 0px;
    list-style: none;
}
.btn{
    display: inline-block;
    width: 500px;
    margin: 6px;
    padding: 15px;
    border: 0px;
    border-radius: 3em;
    background-color: black;
    color: white;
    transition: 0.1s;
    box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}

#btn1{
  opacity: 0;
  animation: slideIn 1.5s 2s 1 ease-out forwards;
}

.btn:hover{
    transform: translateY(-2px);
    transition: 0.3s;
}

.btn:active{
    transform: scale(0.95);
}


span{
    font-size: 32px;
    display: inline-block;
}

@keyframes slideIn {
  0% {
    opacity: 1;
    transform: translateX(-900px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
#questions a {
  display: block;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Question 1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="../css/style.css" rel="stylesheet" type="text/css"/> 
    </head>
    <body>
        <section>
            <div >
                <h1>Question 1</h1>
                <h2>How many times does the earth fit in<br/> the sun?</h2>
                <ul id="questions">
                    <li>
                        <a href="Question 2.xhtml">
                            <button id="btn1" >
                                <span>
                                    1300000
                                </span>
                            </button>  
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </body>
</html>