Reading Assignment 14
Why This Matters
Having a site that gains user views is how an organization gains attention & most importantly enhances the business or services the organization delivers. Having a way to draw attention in ways that keeps the visitor on a site by using transitions & animations is one way to show a developer’s expertise. I just have a hard time seeing me be able to do this in a way that would attract employers to me.
Questions To Answer
What does a CSS transform allow the developer to do to an element?
In CSS the transform property can apply a 2D or 3D aspect to an element from its original placement. This property allows the element to be skewed, rotated, enlarged, moved, and altered with combinations of properties.
Provide an example of a transform and how you could see that being used on a website
Attention could be drawn to a user visiting a site to focus on a title or section of text by rotating or skewing a section of text with and highlighted with a bright background color.
div { transform: rotate(20deg); background-color: red;}
What does a CSS transition allow the developer to do to an element?
Developers utilize CSS transitions to not only change the appearance of an element but its behavior over a period of time. Transitions allow for elements to change from an initial view the user sees to an “altered” state when the user focuses or hovers over the element. Transition uses the following:
CSS selector {
transition-property: CSS property to be transitioned;
transition-duration: duration of the transition;
transition-timing-function: timing-function which can show a movement at a certain speed or accelerate or slow-down;
transition-delay: how long to wait before commencing the transition;
Short-hand is:
transition: property duration timing-function delay;
}
How does a CSS animation differ from a CSS transition?
When CSS animations are utilized the appearance and behavior of an element is altered differently than transitions. Transitions change the appearance from one state to another while animations utilize multiple placement points in order to provide “movement” that occurs over multiple keyframes.
What are some benefits to using CSS transitions on websites?
CSS transition immediately can emphasize HTML elements on a page reload or user interaction. A page with a great deal of content or a site trying to compete with other orgainzations to gain more views can distinguish itself from other sites. It can make the site appear “alive” as well as help focus the user’s attention on navigating thru the site. Finally using transitions in CSS can remove the security holes found in the legacy flash technology developers were reliant upon for movement.
How this topic fit in with your long-term goals?
I think transitions and animations can definitely “overcome” a site and must be used sparingly to give the site a sharp look. Admittedly, I don’t think I have the focus of what is needed to be a front-end developer/designer but may change over time as I get to use the different CSS properties to make a user want to stay at the site I develop.
Sources Utilized
8 SIMPLE CSS3 TRANSITIONS THAT WILL WOW YOUR USERS
Pure CSS Bounce Animation on CodePen