Want to try something new? Try using transitions on opacity properties to make things fade in and out, or apply them on other CSS3 effects like a box-shadow to get a little crazy. As mentioned before, we will set this change to occur on hover in CSS like so:Īs you can see, transitions make things just a little more beautiful, and they are painless to set up. The transition is set up! Now we need something to trigger the change in the box’s background. ms-transition: background 200ms ease-in moz-transition: background 200ms ease-in webkit-transition: background 200ms ease-in So, you can essentially copy your transition multiple times as set up below in a way that can be interpreted by a variety of browsers. Until CSS3 is widely adopted – and actually, it already is, but let’s play it safe – it is wise to set up transitions with browser-specific codes. You can also use ease-out, ease-in-out, or, really, any variation of curves, for the more nuanced (see ). An “ease-in,” applied below, means it will start slowly and then gently accelerate to a finish. We can set an easing property on the transition so that instead of changing linearly over time, it might start slow, end slow, or some combination thereof. Something else to consider is animation timing. However, overuse of “all” transitions can be a performance hog, so it’s really best kept to development and testing only. You can also use the word “all” in its place which will make all properties of the element transition, rather than just the background property. Notice we use the “background” property as the specific property that will transition. Step #1 can be achieved with the line of code below, which effectively says “if this element’s background property changes, then it will change over 200 milliseconds (0.2 seconds) rather than suddenly. Implement something to change the box’s background color – in this case, a hover state.Tell the box that its background property should use a transition and change over time.To define the background color transition, we need to do two things: See the wonderful box below? Try hovering your mouse over it and note the gradual change in its background color. Want to change a background color, font size, or opacity gradually? Transitions, transitions, transitions. W3Schools states that transitions allow you to “change property values smoothly (from one value to another), over a given duration.” Simply put, transitions allow you to change ( just about) any CSS value over time. Let’s get moving! Animating with CSS3 TransitionsĬSS3, the latest web styling standard, added a feature called transitions. We will start with CSS transitions and then briefly cover the use of a popular library called Animate.css. Here, we will learn how to implement animations in two different and surprisingly simple ways. The best part is that adding animation to your website doesn’t have to be difficult. Animation brings movement, life, and a sense of polish to your website, creating a presentation static websites simply cannot achieve. PaperStreet makes frequent use of animations on homepages we build, and it’s easy to see why.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |