I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time.


            @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
            @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
            @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

            .fade-in {
              opacity:0;  
              -webkit-animation:fadeIn ease-in 1;  
              -moz-animation:fadeIn ease-in 1;
              animation:fadeIn ease-in 1;

              -webkit-animation-fill-mode:forwards;  
              -moz-animation-fill-mode:forwards;
              animation-fill-mode:forwards;

              -webkit-animation-duration:1s;
              -moz-animation-duration:1s;
              animation-duration:1s;
            }

            .fade-in.one {
              -webkit-animation-delay: 0.7s;
              -moz-animation-delay: 0.7s;
              animation-delay: 1s; /* Delay between elements */
            }

            .fade-in.two {
              -webkit-animation-delay: 0.7s;
              -moz-animation-delay:0.7s;
              animation-delay: 2s; /* Delay between elements */
            }

            .fade-in.three {
              -webkit-animation-delay: 2.7s;
              -moz-animation-delay: 2.7s;
              animation-delay: 3s; /* Delay between elements */
</style> <table width="100%" class="container"> <td width="33%" class="fade-in one"> <img width="100%" src="sekerko.png"> </td> <td width="33%" class="fade-in two"> <img width="100%" src="miko.png"> </td> <td width="33%" class="fade-in three"> <img width="100%" src="lakyrka.png"> </td> </table>
javascripthtmlcss

Answer №1

You have the option to utilize the CSS property called animation-play-state. This particular property defines whether an animation is currently running or paused.

CSS Syntax:

animation-play-state: paused | running | initial | inherit;

In JavaScript, you can check the status of this property to see if the animation is in progress or not. Moreover, using JavaScript, you can control the playback by either pausing or resuming the animation. When you resume a paused animation, it will continue from the exact point where it was stopped instead of starting all over again from the beginning of the sequence.

Find out more on MDN

Example:

function run() {
    var list = document.getElementsByClassName( 'fade-in' );

    list[0].style.animationPlayState = 'running';
    list[1].style.animationPlayState = 'running';
    list[2].style.animationPlayState = 'running'
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;

    /* Pause animation */
    animation-play-state: paused
}

.fade-in.one {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 1s /* Start mezi jednotlivými elementy */
}

.fade-in.two {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay:0.7s;
    animation-delay: 2s /* Start mezi jednotlivými elementy */
}

.fade-in.three {
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
    animation-delay: 3s /* Start mezi jednotlivými elementy */
}
<input type="button" value="Click Me" onclick="run()"></input>

<table width="100%" class="container">
    <td width="33%" class="fade-in one">
        <img width="100%" src="http://www.google.com/intl/en_ALL/images/logo.gif">
    </td>
    <td width="33%" class="fade-in two">
        <img width="100%" src="http://www.google.com/intl/en_ALL/images/logo.gif">
    </td>
    <td width="33%" class="fade-in three">
        <img width="100%" src="http://www.google.com/intl/en_ALL/images/logo.gif">
    </td>
</table>

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

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

What is the process for showcasing specific Firestore items on a webpage?

database I've encountered an intriguing bug in my code that is proving difficult to resolve. The code involves a straightforward setup with React and Firestore, where items are listed on one page and their details are displayed on the next. However, t ...

javascriptreactjsgoogle-cloud-firestore

Leveraging an external global variable file that is not incorporated into the bundle

I have a JavaScript file dedicated to internationalization. I am looking for a way to provide this file to clients for them to edit without requiring me to rebuild the entire project. Currently, I store this file in the static folder so it is included in ...

javascriptwebpackvue.jsinternationalizationvue-i18n

css - the art of centering span text within a rounded button

CodeSandbox: https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js https://i.sstatic.net/HDtft.png I'm trying to center the dash text within a button, but I'm struggling to find a solution. html <button class="round-butto ...

cssvue.jsbootstrap-4

Update the section tag upon submission using jQuery on a jQuery Mobile HTML page

I have integrated a jquerymobile template into Dreamweaver 6.0 to create a mobile app interface. The home screen features four buttons - specifically, View, Create, Update, Delete. Upon clicking the Create button, a new screen is opened (each screen corres ...

javascriptjqueryajaxhtmljquery-mobile

Maintain cookie persistence beyond browser shutdown

Using this code snippet in Node-Express JS, I am creating a cookie with a JWT token included. Here is the code: var token = jwt.sign(parsed.data, "token_secret", {expiresIn: "43200m"}); res.setHeader('Set-Cookie', 'token='+token+&apos ...

javascriptnode.jsexpresscookiesjwt

enigmatic margin surrounding navigation dots

I have added a straightforward dot navigation to the banner of my website. You can check it out HERE. The HTML code I used is shown below: <ul class="carousel-dots"> <li> <a href=""></a> </li> <li> ...

htmlcss

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

I'm currently in the process of developing a website using bootstrap3. Despite watching numerous tutorial videos, I am still facing challenges. One of my goals is to have the logo on the navbar aligning with the left side (which I've achieved ...

htmlcsstwitter-bootstrap-3

Convert form data into a JSON object utilizing JQuery and taking into account nested JSON objects

Currently, I am facing an issue while extracting data for submission using the jQuery `serializeArray()` function. This function works efficiently by providing an array of { name: value } objects, where the name corresponds to the elements in the form. How ...

javascriptjqueryhtmljson

The vue template is indicating an error related to unused variables according to the eslint rule vue/no

Perhaps this information will come in handy for someone. I am working with a Vue template that contains HTML. <template slot="HEAD_Status" slot-scope="data"> <!-- some html without using of data --> </template> Eslint is showing [v ...

htmlvue.jseslint

Searching the Google Place API to generate a response for dialogflow

I am currently facing an issue while trying to utilize the Google Place API for retrieving details to display a map (by fetching coordinates) and location information (address) as a response from my chatbot. I have created this code snippet, but encounteri ...

javascriptgoogle-places-apidialogflow-es

Conceal elements of a rectangular shape using CSS

https://i.stack.imgur.com/ebaeI.jpg I need help hiding the second rectangular shape on my website. I want the width to be 100% and responsive, but whenever I use position: absolute; with right:-10%, it's not working as expected. Even trying body { ma ...

htmlcss

What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

In the HTML page, I have two buttons implemented with the following code: <!-- Button for WIFI projects: --> <a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi"> <div class="news_box news_box_01 hvr-u ...

javascriptjqueryhtmlcss

Which approach yields better performance: setting all dom events simultaneously, or incrementally?

Is it more effective to attach event listeners permanently or only when needed? For example, consider a scenario where you have a dropdown menu in your HTML that opens when clicked. Within this menu, there is a close button that closes the menu upon click ...

javascriptperformanceeventsdom-events

The configuration "react-app" failed to load, hindering the ability to extend it while working on the project

After creating a react app using yarn create react-app, I ran yarn start and the project loaded fine on localhost. However, any edits made to a file (such as adding a new tag or renaming the contents of a div) caused the app to throw an error during compil ...

javascriptreactjseslintcreate-react-apppackage.json

The functionality of linear mode seems to be malfunctioning when using separate components in the mat-horizontal-stepper

In an effort to break down the components of each step in mat-horizontal-stepper, I have included the following HTML code. <mat-horizontal-stepper [linear]="true" #stepper> <mat-step [stepControl]="selectAdvType"> <ng-template matStep ...

javascriptangulartypescriptangular-materialangular5

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

Style the modal body to display as a block on both desktop and mobile devices using CSS

My goal is to ensure that the modal-body is vertically aligned for optimal visibility on both mobile phones and PCs. I am utilizing bootstrap for this purpose. <div class="modal-body" style="display: inline-block;"> <div> ...

htmlcssbootstrap-5

Send a request to templateUrl

After experimenting with AngularJS, I decided to create a dynamic route system that funnels all routes through a single PHP file. This was motivated by my desire to prevent users from accessing raw templateUrl files and seeing unstyled partial pages. Prio ...

javascriptajaxangularjs

Error: User cannot be used as a constructor

When attempting to register a user using a Node.js app and MongoDB, I encountered the following error message: const utente = new Utente({ ||||| TypeError: Utente is not a constructor This is my model file, utente.js: const mongoose = require("mongoose") ...

javascriptnode.jsmongodbexpress