25 Replies Latest reply: Dec 12, 2012 7:12 AM by Daniel-Waddon RSS

    Css Transition

    Daniel-Waddon Community Member

      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

        • 1. Re: Css Transition
          Jon Fritz II CommunityMVP

          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

          • 2. Re: Css Transition
            Nancy O. CommunityMVP

            Intro to the CSS Transitions Panels in DW CS6:

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

             

             

            Nancy O.

            • 3. Re: Css Transition
              Daniel-Waddon Community Member

              Thanks, still not working.

               

              css now:

               

              .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 */

              }
              .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;
              }

              • 4. Re: Css Transition
                Daniel-Waddon Community Member

                Thanks for that ill will save that link and work on that

                • 5. Re: Css Transition
                  Jon Fritz II CommunityMVP

                  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.

                  • 6. Re: Css Transition
                    Daniel-Waddon Community Member

                    Thanks for the quick reply, sorry this is my first time on this what do mean by "to" states? could you please correct my code and post it so it will work?

                     

                    I have dyslexia so i think im doing very good

                    • 7. Re: Css Transition
                      Jon Fritz II CommunityMVP

                      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

                      • 8. Re: Css Transition
                        Daniel-Waddon Community Member

                        Thanks again I think I get it so it should look like this?

                         

                        .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 */

                        -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;

                        }

                        .contentinformation:hover {

                        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 */

                        -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;

                        }

                        • 9. Re: Css Transition
                          Jon Fritz II CommunityMVP

                          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.

                          • 10. Re: Css Transition
                            Daniel-Waddon Community Member

                            Thanks and how is that done and sorry to be a pain.

                            • 11. Re: Css Transition
                              Jon Fritz II CommunityMVP

                              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

                              • 12. Re: Css Transition
                                Daniel-Waddon Community Member

                                Thanks thats great, can thhis be done in the css rule definition box of do I have to go in to code view and do it?

                                • 13. Re: Css Transition
                                  Jon Fritz II CommunityMVP

                                  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.

                                  • 14. Re: Css Transition
                                    Al Sparber Community Member

                                    -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

                                    • 15. Re: Css Transition
                                      Al Sparber Community Member

                                      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

                                      • 16. Re: Css Transition
                                        Daniel-Waddon Community Member

                                        Im using cs5 and there is no attributes in the css window? to change it from and to. im now lost

                                        • 17. Re: Css Transition
                                          Daniel-Waddon Community Member

                                          im lost can someone tell me how to transition from one to the other?

                                          • 18. Re: Css Transition
                                            Al Sparber Community Member

                                            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

                                            • 19. Re: Css Transition
                                              Daniel-Waddon Community Member

                                              Thanks for the reply, Im not sure what to add so could you please help so i know? I have it some what working, the colour changes but its not moving up or down and the transition out is not the same as in.

                                               

                                               

                                              css now

                                               

                                              .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 */

                                              }
                                              .contentinformation:hover {
                                              background-color: #FFF;
                                              color: #000;
                                              text-align: center;
                                              font-weight: bold;
                                              -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;

                                              }

                                              • 20. Re: Css Transition
                                                Al Sparber Community Member

                                                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

                                                • 21. Re: Css Transition
                                                  Daniel-Waddon Community Member

                                                  surly the "transition" property should go on bouth, up state and down. also i have tried taking the "transition" property of from the :hover and that still dont make the "transition" go to top?

                                                   

                                                  woow and this is a simple "transition" ?

                                                  • 22. Re: Css Transition
                                                    Al Sparber Community Member

                                                    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

                                                    • 23. Re: Css Transition
                                                      Daniel-Waddon Community Member

                                                      In order to learn you need to ask questions, remember I also have dyslexia so i need it explained in a differant way then what you are teaching me.

                                                       

                                                      It is still not working

                                                      • 24. Re: Css Transition
                                                        Jon Fritz II CommunityMVP

                                                        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.

                                                        • 25. Re: Css Transition
                                                          Daniel-Waddon Community Member

                                                          Hi Jon

                                                           

                                                          I do understand that and thanks for all the help.