Add responsiveness with Key Frames

[RodrigoNet0]

No description provided.

[HarikaB11]

Hi, I like to work on this issue, but no description is provided to move forward.

[RodrigoNet0]

Desktop style

@media (min-width: 992px) {
.element {
animation: desktop-animation 3s infinite;
}
}

Mobile style

@media (max-width: 991px) {
.element {
animation: mobile-animation 3s infinite;
}
}

Desktop animation

@Keyframes desktop-animation {
0% { background-color: red; left: 0px; top: 0px;}
25% { background-color: yellow; left: 200px; top: 0px;}
50% { background-color: blue; left: 200px; top: 200px;}
75% { background-color: green; left: 0px; top: 200px;}
100% { background-color: red; left: 0px; top: 0px;}
}

Mobile animation

@Keyframes mobile-animation {
0% { background-color: blue; left: 0px; top: 0px;}
25% { background-color: green; left: 100px; top: 0px;}
50% { background-color: red; left: 100px; top: 100px;}
75% { background-color: yellow; left: 0px; top: 100px;}
100% { background-color: blue; left: 0px; top: 0px;}
}

This is just a simple example. You can customize the animations and media breakpoints to suit your specific needs. Remember, the animation can be anything from color change, movement, transformation, etc. The key is to define different keyframes for different screen sizes.

[khamkarsuraj]

Hello @RodrigoNet0,
I can work on this ticket. Could you assign me this task?

[RodrigoNet0]

Hello @khamkarsuraj are you ok?
The admins didn't give me that decision-making power, you can contact the lady in the comment above

[khamkarsuraj]

Hello @HarikaB11 ,
Is anyone working on this ticket?

[HarikaB11]

@khamkarsuraj Yes, I am working on this.

[shivansh84ya]

I would like to work on this issue. Could you please assign it to me?
Thanks!

[gromgit]

I'm pretty sure the correct process is to raise a PR with the appropriate changes, not wait to be assigned.

[ridwanyinus]

I'm pretty sure the correct process is to raise a PR with the appropriate changes, not wait to be assigned.

you are right

[DSingh0304]

Hi, I am new to contributions, still a rookie but I will still try !!

[DSingh0304]

/* Tablet style */
@media (min-width: 768px) and (max-width: 991px) {
.element {
animation: tablet-animation 3s infinite;
}
}

/* Tablet animation */
@Keyframes tablet-animation {
0% { background-color: purple; left: 0px; top: 0px;}
25% { background-color: orange; left: 150px; top: 0px;}
50% { background-color: pink; left: 150px; top: 150px;}
75% { background-color: cyan; left: 0px; top: 150px;}
100% { background-color: purple; left: 0px; top: 0px;}
}

This is some CSS added by me ..