Skip navigation
Currently Being Moderated

Css Transition

Dec 11, 2012 12:44 PM

Tags: #cs5 #error #html #css #layout #html5 #css3

HI

 

I want to add a transition like this: http://tv.adobe.com/watch/cs6-creati...eamweaver-cs6/

 

 

 

html

 

<div id="webDesign">
<div class="contentinformation" id="contentinformation">
<h2>Cheap Website Design</h2>
<p>Cheap web design from £89.99 for 1 page</p>
</div>
<br />
</div>

 

css

 

#webDesign {

 

background-image : url(../images/web-design.jpg);

 

background-repeat : no-repeat;

 

float : left;

 

height : 143px;

 

width : 220px;

 

overflow : hidden;

}

 

.contentinformation {

background-color: #000;

color: #FFF;

margin-top: 100px;

text-align: center;

font-weight: bold;

padding-top: 1px;

opacity:0.8;

filter:alpha(opacity=80); /* For IE8 and earlier */

-webkit-transition-property: top, bottom;

-webkit-transition-duration: 0.5s;

}

.contentinformation:hover {

top:0px;

bottom:0px;

-webkit-transition-property: top, bottom;

-webkit-transition-duration: 0.5s;

}

 

 

 

Thanks in advance for any help

 
Replies
  • Currently Being Moderated
    Dec 11, 2012 12:50 PM   in reply to Daniel Waddon

    A -webkit-transition will only work on Chrome and Safari.

     

    You also need the following to ensure maximum cross browser goodness...

     

    -webkit-transition: (for safari and chrome)

    -moz-transition: (for firefox)

    -o-transition: (for opera)

    transition: (for when they all switch after css3 is turned into the standard)

     

    Here is a good reference page for the transition shorthand (I never separate them out anymore)...

     

    http://www.w3schools.com/css3/css3_transitions.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 1:13 PM   in reply to Daniel Waddon

    Intro to the CSS Transitions Panels in DW CS6:

    http://www.adobe.com/devnet/dreamweaver/articles/css-transitions-panel .html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 1:35 PM   in reply to Daniel Waddon

    You also need to define the "to" states for all of the attributes you want to change from .contentinformation to .contentinformation:hover

     

    For example, if you want the background color to change, both classes need to have a background-color defined.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 1:47 PM   in reply to Daniel Waddon

    What I mean is if you want...

     

    .contentinformation {
    background-color: #000;
    color: #FFF;
    margin-top: 100px;
    text-align: center;
    font-weight: bold;
    padding-top: 1px;
    -webkit- opacity:0.7;
    -moz-opacity: 0.7;
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */

    }

     

    to change when you hover over it as ...

     

    .contentinformation:hover {

    -webkit-transition: all 1s linear 0.5s;

    -moz-transition: all 1s linear 0.5s;

    -ms-transition: all 1s linear 0.5s;

    -o-transition: all 1s linear 0.5s;

    transition: all 1s linear 0.5s;

    top: 0px;

    bottom: 0px;

    }

     

    Implies, you need to define all of the attributes for the :hover version that you want changed when hovered. Right now, you have nothing defined on .contentinformation:hover except a top and bottom attribute (that are likely unnecessary). The transition can't happen because you have not defined the color, background-color, etc for the :hover. You should have something like...

     

    .contentinformation {
    background-color: #fff;
    color: #000;
    margin-top: 100px;
    text-align: center;
    font-weight: bold;
    padding-top: 1px;
    -webkit- opacity:0.7;
    -moz-opacity: 0.7;
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */

    -webkit-transition: all 1s linear 0.5s;

    -moz-transition: all 1s linear 0.5s;

    -ms-transition: all 1s linear 0.5s;

    -o-transition: all 1s linear 0.5s;

    transition: all 1s linear 0.5s;

    }

     

    For the .contentinformation:hover style. If you want it to transition back when you mouse out of the div, you also need to add the transitions to the end of the .contentinformation class as well

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 2:03 PM   in reply to Daniel Waddon

    Almost there.

     

    Now all you need to do in the .contentinformation:hover class is change your settings to make the transition go "from" the settings in .contentinformation "to" the settings in .contentinformation:hover when the mouse moves in.

     

    Keep in mind, none of this works in IE9 or lower.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 2:13 PM   in reply to Daniel Waddon

    You need to change the values of the attributes in .contentinformation:hover so the transition can move from one value to the next.

     

    In your current code, you have "background-color:#000;" in both the .contentinformation and .contentinformation:hover classes (as well as opacity settings and color settings). On :hover it would be transitioning from the hex color #000 to #000 which is the same color and not a very exciting transition.

     

    Change the attribute values from one class to the next so the transitions moves from something to something else.

     

    A good set of tutorials for basic css is available here: http://www.w3schools.com/css/default.asp

     

    Once you have the basics of css down, you can add in css3 (which includes transitions) here: http://www.w3schools.com/css3/default.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 2:31 PM   in reply to Daniel Waddon

    You can do it from the CSS Styles Window.

     

    Go to Window > CSS Styles

     

    In the window that comes up, click "All" then the style you want to change. Make changes in the bottom half of the window. Depending on your version of DW, some attributes may not show up in that window and will require some hand adjusting in the source.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 2:33 PM   in reply to Jon Fritz II

    -webkit-transition and transition are all that is necessary. The last

    several versions of Firefox support the standard as does Opera and IE10.

    Only Safari and Chrome need the vendor prefix.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 2:36 PM   in reply to Daniel Waddon

    The transition goes on the default element. All that goes on hover is

    the properties that you want to transition. With "All" set, all

    properties on the hover will be animated if they are different from

    those on the default element. Here is a working example running on a

    prototype page for an upcoming PVII widget:

     

    http://www.projectseven.com/products/tools/accordion3/demos/base.htm

     

    View the CSS.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 3:18 PM   in reply to Daniel Waddon

    CS5 does not support CSS3 transitions in the panels. You need to code

    this manually in your CSS file.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 6:21 PM   in reply to Daniel Waddon

    I don't use the browser for this forum... I use email and I cannot send

    any type of code.

     

    The "transition" property does not go on the "contentinformation hover"

    rule. It goes on the "contentinformation" rule. The "all" value means

    that the browser will look for all properties common to both rules and

    animate those with different values. It's really quite simple. What

    don't you understand?

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 1:23 AM   in reply to Daniel Waddon

    If you do not want to learn then stop posting. I explained how it works.

    Why are you arguing?

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 6:42 AM   in reply to Daniel Waddon

    Danny, you need to understand that this is a user-to-user forum and the people here are just designers and developers with a generally helpful disposition. Very few of the people here are Adobe emplyees and even fewer (if any) are trained to handle dyslexia in an educational environment.

     

    From what I understand, we're all going to need to be a little more patient.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points