Scribd
Upload
23 views2 pages

CSS Animated Paragraphs with Events

This document is an HTML page that includes CSS styles for paragraphs, enabling them to animate when clicked. It defines a keyframe animation that moves the paragraphs horizontally and uses JavaScript event handlers to toggle the animation class on click events. The page features two paragraphs that respond to user interaction by starting or stopping their movement.

Uploaded by

selfhustle07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views2 pages

CSS Animated Paragraphs with Events

This document is an HTML page that includes CSS styles for paragraphs, enabling them to animate when clicked. It defines a keyframe animation that moves the paragraphs horizontally and uses JavaScript event handlers to toggle the animation class on click events. The page features two paragraphs that respond to user interaction by starting or stopping their movement.

Uploaded by

selfhustle07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Create a page using css p attributes ,DOM, event

handler, positioning page elements, animating


movements.
<!DOCTYPE html>

<html>

<head>

<title>Animated Paragraphs</title>

<style>

/* CSS styles for paragraphs */

p{

font-family: Arial, sans-serif;

font-size: 16px;

color: #333;

margin: 10px;

padding: 10px;

border: 1px solid #ccc;

cursor: pointer;

position: relative;

/* CSS animation for paragraph movement */

@keyframes moveParagraph {

0% { left: 0; }

50% { left: 50px; }

100% { left: 0; }

/* Apply animation to paragraphs */

.moving {

animation: moveParagraph 2s ease infinite;

}
</style>

</head>

<body>

<p id="paragraph1">Click me to move!</p>

<p id="paragraph2">same but different!</p>

<script>

// JavaScript to handle paragraph movement

[Link]("paragraph1").addEventListener("click", function() {

[Link]("moving");

});

[Link]("paragraph2").addEventListener("click", function() {

[Link]("moving");

});

</script>

</body>

</html>

OUTPUT:-

Moving after click

You might also like