notes2-final

SESSION A

Enhancing websites with CSS transitions (Unit 06)
 
What are CSS Transitions?
A few years ago you couldn’t gradually shift a text color. A button was either one size or another. Images were either transparent or opaque. There was no subtle changes from one state to the next. There were no transitions. CSS transitions allow for simple animations between CSS property values. You can set the specific transition-property you want to animate or you can use ‘all’.
 
 
CSS Transitions 101
  • transition-property – specifies which CSS property (or properties) to animate. The default is ‘all’ to animate any property that is capable of being transitioned changes
  • transition-duration – specifies how much time the transition animation takes to run.
  • transition-delay – specifies the amount of time for a pause before the animation begins if not 0. Note, transitions do not have to have a pause before they begin.
  • The transition-timing-function property allows you to control a transitions’s speed of progress. It accepts keywords: ease, ease-in, ease-out, ease-in-out, linear, or custom cubic-bezier() response curves.
 
Look at the markup for the registration button. We want to target this button for our transition exercise:
 
<a class="register" title="Register now”]]>
Register Now!</a]]>


Week_05_Transition_jQuery
 
 
Take a look at the simple css code below. It is simply stating that :links should be blue and upon :hover they should turn red. Demo that code in your editor and notice how abrupt the change is.
 
a.register {
        color: blue;
}

a.register:hover {
        color: red;
}


What we want to happen is that when we hover over the <a> element our color gradually shifts from blue to red.
 
 
CSStransition-5a
 
 
Lets take a look at that code again but adding a simple transition from one color to another when a user hovers over a link. Just like any other CSS property, transitions are added directly to the element or selector they are applied to.
 
a.register {
        color: blue;
        transition: color .25s linear;
}

a.register::hover {
        color: red;
        transition: color .25s linear;
}
Now lets have a little fun. We’re going to build other property transitions to the button. First we switch the transition-property to ‘all’ instead of color. This will allow us to transition between all the css properties we specify. In this demonstration, when the user hovers over the registration button we will increase the width by 50px, the height by 25px, and the border will increase to 10px width and color red like the text. When the user hovers off the button the button will transition back to its default size and color.
 
Week_05_Transition_jQuery_2
 
a.register {
        color: blue;
        padding: 20px 0;
        width: 300px;
        border: 3px solid #999;

        transition: color .25s linear;
}

a.register::hover {
        color: red;
        padding: 50px 0;
        width: 350px;
        border: 10px solid red;

        transition: color .25s linear;
}
 
List of all the CSS properties that can be transitioned
 
 
Property Name Type
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number