Reading Journal
This topic is important to me because not only is proper web styling aesthetically pleasing but it helps with user engagement. Nobody wants to visit a website that is clunky or feels like it was an after thought. Proper use of transitions and animations can increase the dynamic nature of a site and also act as a form of nonverbal communication which further helps guide the end user.
Reading
- The CSS transform property allows a developer to manipulate the element on the x, y and z axis. When used in combination with other values one can create depth, rotate, and distort the element.
.example-image {
width: 200px;
height: 200px;
transition: transform 0.2s ease-in-out;
}
.example-image:hover {
transform: scale(1.5);
}
This could be used when wanting to allow the user to hover over an image
in order to zoom in closer.
CSS Transitions & Animations
1. What does a CSS transition allow the developer to do to an element?
- It allows the developer to provide visual feedback to the user which can help provide a more dynamic webpage. It can help smooth out transitions that could otherwise be perceived as static or glitchy.
2. How does a CSS animation differ from a CSS transition?
- An animation can be programmed to run automatically based on predefined parameters, such as on page load. Animations are also more complex in nature. A transition is triggered off of user interaction and typically simplistic in design.
8 simple CSS3 transitions that will wow your users
1. What are some benefits to using CSS transitions on websites?
- Using CSS transitions on websites makes for a more dynamic experience for the end user. When utilized correctly, transitions such as buttons changing color on hover or drop down menus can actually help to convey the intended use of the function. Overall, it makes for a more professional feel to a site.
2. How does this topic fit in with your long-term goals?
- This is very important because not only are these useful skills to acquire, but when looking at company websites, I can instantly get a feel for if they’re clunky or smooth in operation just by navigating and interacting with the page. When navigating a large corporation’s website, such as Apple, the website is styled tastefully with smooth transitions, reactive buttons, and intuitive menus. These need to be talents that I can demonstrate in order to set myself apart in the job market.
Things I want to know more about.
I’d like to know how sought after CSS skills are in the job field and what specific CSS skills are valued the most.