This week we got to dive into CSS animations, keyframing, and parallax! Half fun, half confusing. \ud83d\ude42<\/p>\n\n\n\n\n\n\n\n
There are various animations within CSS and it seems to still be evolving! We dove into keyframes for the first time, which allow you to define step-by-step changes in an animation. I’m used to keyframing in the video editing world, not so much coding. Although, they are very similar which makes sense, but also fairly different with how they’re each executed.<\/p>\n\n\n\n
We also looked into transitions and transforms, which are great for adding small touches of interactivity to your site. Transitions let elements smoothly change from one state to another, like a button slowly changing color when hovered over. Transforms are moreso used to rotate, scale, move, or skew elements.<\/p>\n\n\n\n
Parallax was another big topic this week. In CSS, it’s a scrolling type of effect where background images move at a different speed than the foreground content. Parallax can make a website feel more dynamic and immersive, but it can also be pretty tricky to get right. In our parallax challenge assignment, I struggled a bit with image sizing and positioning, although still semi-achieved the effect which was rewarding.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
This week we got to dive into CSS animations, keyframing, and parallax! Half fun, half confusing. \ud83d\ude42<\/p>\n","protected":false},"author":87,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[282,4,281,74,35,18],"class_list":["post-2114","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25","tag-animation","tag-css","tag-keyframing","tag-parallax","tag-responsive-design","tag-web-design"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2114"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2114\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2114\/revisions\/2115"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}