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.