I am animating an image and text in my header. I’m using keyframes and I think it looks great but looking at a lot of other sites, I see them importing js or other files to animate. One I looked at used AOS (whatever that is) and I’ve also played around with animate.css.
Does it matter? Is one approach better than another? What are the best practices for animations?
I’d rather to use CSS for simple animations at least and/or ui elements, like hovers, slideshows etc. And javascript when I need more control or more advanced animations that can’t resolve with just css. Not sure if there is a standard on this but I find this article that could be usefull:
That’s what I thought. That article uses keyframes for a simple one-time animation like what I am doing - thanks!
I decided to look at the text and image I am animating with keyframes in chrome devtools and the position of both elements was all over the place. Now maybe my CSS is wrong but is there something with keyframes that prevents them from being responsive?
you have some link to check it? or paste the code
Here is a CodePen I’ve been working on but I think the % for the text has to be removed. I’m totally redoing my CSS and I’ll try the animation at the end.
Not sure what’s your problem, I see the image good on any size of viewport, excepting maybe the margin, when your title goes down, the image will look better if is centered. Or maybe you didn’t want your title going down?
If is that so, maybe you want your title on absolute position and centered on its container, the image on the left so when the viewport is smaller instead of going down will be placed at top of the image, but will require a media querie for the image to get it centered on small viewport. Not sure if is that what you want.
By the way I don’t think that keyframes are affecting anything on responsiveness.
Ok, thanks. Not sure what is going on. Right now I’m building my portfolio page and I can’t figure out why I have vertical scrolling. I’ll get to the animation once I get this figured out.
By the way, I’m going for the effect on this site: https://www.kaystocks.com/
I don’t see any scrolling on my resolution, I ilke the design you’re almost there just need to adjust some things. You will get there.
Maybe change the width for the image container to max-width or min.width (or even both) could work better for this design, the headings container goes down at 1200px viewport, with a min-width max-width you can let the image flow so it gets smaller until certain point (min-width).
Another tip for the image that I use in all my designs for making images responsive all across the site:
img { width: 100%; }
I put that rule at the top of the file with other reset stuff, so in the layout I only need to control the img container, by setting only the width. For example:
/* reset style */
img { width: 100%: }
/* Layout */
.container {
min-width: 50rem;
width: 60%;
}
This way you can achieve 3 things:
1- Avoid setting height (which is good for responsiveness), the 100% width of img will do the trick.
2- The container will be 60% of the parent until it reaches 50rem, then will stop shrinking, and in your case that yu’re using flexbox on the parent the other elements will be go down as is desired.
3- Mostly times, if you use min-widths smartly you won’t need any mediaquerie for mobile on the flex items at least.
Another tip, with flexbox also you don’t need the min width thing (I forgot that in my last post). Instead you can use flex-basis property:
´flex-basis: 50rem`
with flex shorthand:
flex: 1 1 50rem
The item will grow between 50rem to 100%, then you set only max-width:
flex: 1 1 50rem;
max-width: 60%
Both ways will work similar, flex one will grow the other one will be start at fixed width,
I wrote new HTML and CSS and added them to the pen, though I’m missing padding for the h2 this is the effect I was going for. I hope to have my portfolio page on my website before the end of the week. If you see the post asking for people to critique, then you can see it live - thanks for the help!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.