The CSS animation initially encounters a glitch before ultimately running smoothly as planned

I am currently working on a basic webpage that will showcase a list of disciplines. When a discipline is selected, relevant information will be displayed below.

The code snippet available here demonstrates the functionality I am aiming for. However, I have noticed that the animation only works the first time a section is displayed. Subsequent displays of other sections do not trigger the animation. Once the sections are shown once, the animation works perfectly fine.

@keyframes fadeIn {

    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#content1, #content2, #content3, #content4, #content5 {
    -webkit-animation: fadeIn 0.7s ease-in-out;
    -moz-animation: fadeIn 0.7s ease-in-out;
    -o-animation: fadeIn 0.7s ease-in-out;
    animation: fadeIn 0.7s ease-in-out;
}

input[type="radio"] {
    display: none;
}

#tab1[type="radio"]:not(:checked) ~ #content1,
#tab2[type="radio"]:not(:checked) ~ #content2,
#tab3[type="radio"]:not(:checked) ~ #content3,
#tab4[type="radio"]:not(:checked) ~ #content4,
#tab5[type="radio"]:not(:checked) ~ #content5 {
    display: none;
}

#tab1[type="radio"]:checked ~ #content1,
#tab2[type="radio"]:checked ~ #content2,
#tab3[type="radio"]:checked ~ #content3,
#tab4[type="radio"]:checked ~ #content4,
#tab5[type="radio"]:checked ~ #content5 {
    display: block;
}

Answer №1

The reason for this is that the initial animation has already been activated while your elements were hidden.
Changing their display property to block will not restart their animation. However, setting it to none will.

The simple solution is to define the animation property for your elements in the same location where you specify display: block;.

#tab1[type="radio"]:checked~#content1,
#tab2[type="radio"]:checked~#content2,
#tab3[type="radio"]:checked~#content3,
#tab4[type="radio"]:checked~#content4,
#tab5[type="radio"]:checked~#content5 {
  display: block;
  /* set the animation prop here */
  animation: fadeIn 0.7s ease-in-out;
}

@keyframes fadeIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

input[type="radio"] {
  display: none;
}

#tab1[type="radio"]:not(:checked)+label,
#tab2[type="radio"]:not(:checked)+label,
#tab3[type="radio"]:not(:checked)+label,
#tab4[type="radio"]:not(:checked)+label,
#tab5[type="radio"]:not(:checked)+label {
  color: #888;
}

#tab1[type="radio"]:checked+label,
#tab2[type="radio"]:checked+label,
#tab3[type="radio"]:checked+label,
#tab4[type="radio"]:checked+label,
#tab5[type="radio"]:checked+label {
  color: #000;
}

#tab1[type="radio"]:not(:checked)~#content1,
#tab2[type="radio"]:not(:checked)~#content2,
#tab3[type="radio"]:not(:checked)~#content3,
#tab4[type="radio"]:not(:checked)~#content4,
#tab5[type="radio"]:not(:checked)~#content5 {
  display: none;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" class="pure-button"><span>section 1</span></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" class="pure-button"><span>section 2</span></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" class="pure-button"><span>section 3</span></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4" class="pure-button"><span>section 4</span></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5" class="pure-button"><span>section 5</span></label>
<div id="content1">
  <h1>content 1</h1>
</div>
<div id="content2">
  <h1>content 2</h1>
</div>
<div id="content3">
  <h1>content 3</h1>
</div>
<div id="content4">
  <h1>content 4</h1>
</div>
<div id="content5">
  <h1>content 5</h1>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to eliminate the bottom border on the active navigation tab?

Here's the information I've gathered: Below is a snippet of code that I have: .nav-tabs { border-bottom: 3px solid #3FA2F7 !important; } .nav-tabs .nav-link { color: #02194A; font-size: 13px; padding: 12.5px !important; } ...

Is it possible to alter the color of the text "midway" within a character on a website?

In some desktop applications, I've noticed a cool feature where the color of text changes as the background evolves. This allows for multiple colors on a single character, which is especially useful when displaying progress bars with percentages insid ...

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Trying to find a solution for having sub menus within the menu items. There are 2 dropdown buttons (Reports and Views) within a menu item that is itself a dropdown item. Clicking on the first button displays the submenu below, but clicking on the second ...

Aligning Bootstrap Buttons

How do I create a gap between my Bootstrap4 button and the top of the table, while also aligning it to the edge of the table? <div class="container"> <div class="table-title"> <div class="row"> ...

Are your GetJSON requests failing to execute properly?

I have a code snippet that executes in a certain sequence and performs as expected. <script> $.getJSON(url1, function (data1) { $.getJSON(url2, function (data2) { $.getJSON(url3, function (data3) { //manipulate data1, data2, ...

Ways to avoid losing data when a page is refreshed

After encountering a frustrating issue with my form, I turned to research in hopes of finding a solution. However, each attempt has resulted in disappointment as the data is lost every time the page is refreshed. If anyone has advice on how to prevent th ...

AngularJS directive does not trigger when switching tabs or scrolling pages

I came across a solution to display a placeholder image before the real image fully loads while browsing online here. I implemented the code provided in the accepted answer on my page, where I have two tabs using `ion-slide-box` for tab selection. Each tab ...

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

The login page allows entry of any password

I'm running a xamp-based webserver with an attendance system installed. I have 10 registered users who are supposed to log in individually to enter their attendance. However, there seems to be an issue on the login page where any password is accepted ...

The Firefox browser is not rendering the website correctly

After successfully programming a website with the FullPage Slider from this source, everything was working fine except in Firefox. Specifically, one section containing a table with image overlay hover effects from these effects library was not functioning ...

the deactivation of my rollover class is being caused by my float class

With the assistance of a generous contributor on stackoverflow, I was able to overlay different colored CSS boxes onto various images. These boxes could be removed upon mouseover, revealing the images beneath. You can view the code I used on fiddle here. ...

I seem to be having trouble getting my style to work properly with Material UI's makeStyles

I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...

PHP is causing a mysterious slash to continuously pop up within a string during the creation of session data

I encountered an issue while using session data to set the value of an event title. When the title contains an apostrophe, such as "Britain's Digital Future," a backslash keeps appearing before the apostrophe. This results in multiple slashes being ad ...

Stop images from being stored in the database instead of text characters

Using a proxy, I attempt to parse some HTML. One of the elements is retrieved using jQuery: var site = 'http://www.kartabu.com/pl/index.php?filter=random' var url = 'http://localhost/taboo.blue-world.pl/admin/proxy.php?url=' + encodeUR ...

Email button designed to trigger the execution of PHP code

Can a hyperlink button in Outlook emails be used to run PHP code? For instance, I've designed a computer request form that appears as follows: New Request When you select the "new request" button, it changes to indicate completion: Completed Reque ...

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

"Jsoup interprets certain characters in a unique way during parsing

I attempted to parse this HTML file using Jsoup: <html><body>Maître Corbeau, sur un arbre perché</body></html> The line of code I used was: Document document = Jsoup.parse(input, "UTF-8"); However, when I tried to print the do ...

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

Tips for limiting the size of image uploads to under 2 megabytes

I am trying to implement an html select feature that allows users to upload images. <div class="row smallMargin"> <div class="col-sm-6"> Attach Image </div> <div class="col-sm-6"> <input type="file" ng-model="image" accept=" ...