Convert javascript animation into css3

[hrushi9]

I need help to convert my javascript animation to css3

Currently there are two sections. while going to second section from first section, it shrinks, folds height & width of first section and unfold , enlarge height & width of second section.

Check Demo jsfiddle

Need Help for

1. add more sections.
2. add navigation (<ul><li><a>link 1</a></li><li><a>link 2</a></li><li><a>link 3</a></li></ul>)
3. create in & out class (example of in-out class using switch case)
4. Instead of sections on same page, redirect to anoter page e.g. from index.php to about.php using javascript (if possible)

Having problem while creating classes for animation.

[Benjamin_18]

To make page redirection you can use this js code (you can still add a time delay):

function opennewtab(url )
{
  var win=window.open(url, '_blank');
}

I don't quite remember how to correctly add navigation and correctly distribute classes, so you can see examples here or see how this is done on this site.

[Grad]

maybe you should ask www.wikipedia.org

[gonshonmargo]

Sure! I recommend using CSS3 animations to achieve the desired effect. You can use the @keyframes rule in CSS to define animations with different keyframes and durations. Then, apply the animations to the sections using CSS classes. For example:

To add more sections, duplicate the HTML structure for the sections and update the CSS classes accordingly.
To add navigation, use HTML <ul> and <li> elements to create a list of links, and apply appropriate CSS styles for formatting.
To create "in" and "out" classes, define CSS classes for the animations using @keyframes, and use JavaScript to apply these classes to trigger the animations on the desired elements. For example:
css
Copy code

/* Define keyframes for "in" animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Define keyframes for "out" animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
javascript
Copy code
// Example of applying "in" and "out" classes using JavaScript
let element = document.getElementById("myElement");
element.classList.add("fadeIn"); // Apply "in" animation
element.classList.remove("fadeOut"); // Remove "out" animation

To redirect to another page using JavaScript, you can use the window.location object. For example:
javascript
Copy code

// Redirect to about.php
window.location.href = "about.php";

If you're having trouble creating classes for animation, make sure you define the animations correctly using @keyframes and apply the classes to the correct elements using JavaScript. Double-check your syntax and ensure that the CSS classes are properly added and removed from the elements as needed.

[alishakihn1]

Converting a JavaScript animation to CSS3 requires rewriting the animation logic using CSS3 animation properties and keyframes. Here's a general approach to help you get started:

1. Analyze the JavaScript animation: Understand the animation's behavior, timing, and element properties that are animated.

2. Prepare the HTML structure: Ensure that the HTML elements involved in the animation are properly set up with appropriate classes or IDs.

3. Define CSS keyframes: Define keyframes using @keyframes rule. Keyframes specify the intermediate states of the animation at different percentages (from 0% to 100%).

4. Convert JavaScript animation logic to CSS: Identify the relevant animated properties (e.g., position, opacity, transform) and translate the JavaScript animation logic to CSS animation properties.

5. Apply CSS animation properties: Apply the CSS animation properties to the target elements by specifying the animation name, duration, timing function, delay, and other desired options.

6. Adjust animation timing: Fine-tune the animation timing values (such as duration and delay) to match the original JavaScript animation's timing.

7. Test and iterate: Test the CSS-based animation and make any necessary adjustments to ensure it replicates the JavaScript animation's behavior accurately.

Remember that not all JavaScript animations can be directly replicated in CSS3. CSS3 animations have certain limitations compared to JavaScript, so you might need