I have a css animation which animates a line to move from left to right as well as right to left or in a CSSey way an ::after element which is translated on the x-axis from 0 to 300% and back to 0%
I want to start the animation with default size and scale the size of the element(::after) horizontally when its around the middle portion then go back to the default size at end and vice versa.
I tried adding 50% { transform: scale(1.5)} but this isn't what i want.
const faqContainer = document.querySelector('.faq-box')
const faqBoxes = document.querySelectorAll('.faq')
const displayIcons = () => {
faqBoxes.forEach(box => {
const toggler = document.createElement('i')
toggler.className = `toggler fas fa-chevron-down`
box.appendChild(toggler)
})
}
window.addEventListener('DOMContentLoaded', displayIcons)
const showFaqContent = event => {
if (event.target.classList.contains('toggler') || event.target.classList.contains('faq-title')) {
const parentElem = event.target.parentElement
const eventElmClassList = event.target.classList
parentElem.classList.toggle('active')
if (eventElmClassList.contains('toggler')) {
eventElmClassList.toggle('active')
} else if (eventElmClassList.contains('faq-title')) {
const i = event.target.nextElementSibling.nextElementSibling
i.classList.toggle('active')
}
}
}
faqContainer.addEventListener('click', showFaqContent)*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'poppins';
background: #ECE9E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFFFFF, #ECE9E6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.main-container {
height: 100%;
width: 90%;
}
.main-container h1 {
position: relative;
color: rgb(54, 94, 128);
}
.main-container h1 i {
font-size: 1.5rem;
}
.main-container h1::before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
background-color: rgba(70, 131, 180, 0.507);
}
.main-container h1::after {
content: '';
position: absolute;
width: 25%;
height: 3px;
bottom: 0px;
left: 0;
background-color: rgb(70, 131, 180);
animation: slide .8s linear 0s infinite alternate both running;
}
@keyframes slide {
0% {
transform: translateX(0) scaleX(1);
}
100% {
transform: translateX(300%);
}
}
.faq-box {
background-color: #fff;
border-radius: 8px;
box-shadow: 4px 4px 8px hsl(0, 0%, 80%);
}
.faq {
position: relative;
padding: .8rem 1rem;
margin: .5rem;
border-bottom: .5px solid rgba(221, 221, 221, 0.829);
}
.faq-title {
color: steelblue;
font-weight: 400;
cursor: pointer;
transition: .1s linear;
}
.faq.active h3 {
font-weight: bold;
}
.faq-content {
/* display: none; */
font-family: 'nunito', 'sans-serif';
background-color: rgb(235, 235, 235);
border-radius: 5px;
border-left: 5px solid rgb(54, 94, 128);
margin-top: 0px;
padding: 0;
opacity: 0;
height: 0px;
font-size: .9rem;
color: hsl(208, 41%, 20%);
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.faq.active .faq-content {
/* display: block; */
margin-top: 10px;
opacity: 1;
padding: 1rem;
height: auto;
}
.faq .toggler {
position: absolute;
top: 1.1rem;
right: 1rem;
cursor: pointer;
font-size: 1.25rem;
transition: all .8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.faq .toggler.active {
color: hsl(208, 41%, 50%);
transform: scaleY(-1);
}<!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>Day-12 Faq Boxes</title>
<!-- google api/fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- custom css -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="main-container">
<h1><i class="fas fa-info-circle"></i> FAQ</h1>
<div class="faq-box hide">
<div class="faq">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
</div>
<div class="faq">
<h3 class="faq-title">What is the maximux file upload size?</h3>
<p class="faq-content">No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="faq">
<h3 class="faq-title">How do i reset my password?</h3>
<p class="faq-content">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
</div>
<div class="faq">
<h3 class="faq-title">Can i cancel my subscription?</h3>
<p class="faq-content">Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="faq">
<h3 class="faq-title">Do you provide any additional support?</h3>
<p class="faq-content">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
<!-- fontawesome script -->
<script src="https://kit.fontawesome.com/39350fd9df.js"></script>
<!-- Custom Javascript -->
<script src="main.js" type="text/javascript"></script>
</body>
</html>try a background animation instead:
.main-container h1 {
position: relative;
color: rgb(54, 94, 128);
padding-bottom:5px;
}
.main-container h1::before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left:0;
animation: slide .8s linear infinite alternate;
background:
linear-gradient(rgb(70, 131, 180) 0 0) left/25% 3px no-repeat
rgba(70, 131, 180, 0.507);
}
@keyframes slide {
50% {
background-size:50% 3px;
}
100% {
background-position: right;
}
}<div class="main-container">
<h1>FAQ</h1>
</div>