Comments (6)
Hi, I like to work on this issue, but no description is provided to move forward.
from css-protips.
Hello @RodrigoNet0,
I can work on this ticket. Could you assign me this task?
from css-protips.
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.
from css-protips.
Hello @khamkarsuraj are you ok?
The admins didn't give me that decision-making power, you can contact the lady in the comment above
from css-protips.
Hello @HarikaB11 ,
Is anyone working on this ticket?
from css-protips.
@khamkarsuraj Yes, I am working on this.
from css-protips.
Related Issues (20)
- Some misunderstandings about adjacent sibling combinator (+) as alternative way of using :not() pseudo-class HOT 4
- Different language HOT 1
- [Suggestion]CSS for ebooks
- Translations HOT 1
- Animation to any element HOT 5
- Edge now supports "all" keyword HOT 1
- Add tip: wrapper utility HOT 2
- good jop
- Add tip: Using Aspect Ratio instead of usual Margin and Padding HOT 6
- Add tip: Adding CSS Libraries like bootstrap and making this repo more elaborate. HOT 1
- Css pro tips
- Suggestion: Turn this collection of tips into a github pages site. HOT 1
- Max Function for Max-Width HOT 1
- How do I overlay an image over the background one ? HOT 4
- How to wrap a title into respective multiline headings.? HOT 1
- Placeholder Selector HOT 2
- List of links, can't add style with CSS HOT 1
- Readme upgrade HOT 3
- Css pro tips
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-protips.