Blog 3: CSS Transition

I found a CSS transition effect from this website. http://www.phillipspart.com/. When you hover your mouse over the magnifying glass on the picture, a block with words on it would come out.

7b99262e69142209b1f334d810a65e3c

When I tried to find the CSS coding of the element with Chrome, I got something like this:

-webkit-transition: all 300ms;

-webkit-transition-property: all;

-webkit-transition-duration: 300ms;

-webkit-transition-timing-function: initial;

-webkit-transition-delay: initial;

-moz-transition: all 300ms;

-o-transition: all 300ms;

transition: all 300ms;

transition-property: all;

transition-duration: 300ms;

transition-timing-function: initial;

transition-delay: initial;

I think there should be a part that’s about “hover,” but I couldn’t find the complete coding for the transition.

After combining the transition coding from several websites, I made a transition effect like this:

95f868fa286e96956f26260c53cef0b2

(If you copy paste the coding directly from the blog to TextWrangler, the coding won’t work because the quotation marks display wrongly on the blog)

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title> Transition </title>
<link rel=”stylesheet” href=”test.css” type=”text/css”/>

</head>
<body>

<div id=”container”>
<p>Surprise!</p>
</div>

</body>
</html>

CSS

#container {
width: 10px;
height: 100px;
background: lightgreen;
-webkit-transition-property: width ;
-webkit-transition-duration: 300 ms;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
transition-property: width;
transition-duration: 300 ms;
transition-timing-function: linear;
transition-delay: initial;

font-size: 50px;
font-family: “Comic Sans MS”, cursive, sans-serif;
list-style: none;
margin-left:100px;
}

#container:hover {
width:500px;
color:lightyellow;
height: 100px;
}

What I really want to figure out is how to make the words appear and disappear together with the transition.

Advertisements

One thought on “Blog 3: CSS Transition

  1. Transition is quite useful and I’ll use it on my website as well.
    I’m wondering if we could transition between different photos. For example, in the first case of real state introduction, if I click the magnifying glass, can I make the picture zooming in and show another picture of the inner space of the room finally?
    Another confusion is, from what I saw on this page, the effect is mainly a color change without transition. I guess it may be because the gif format is not fluent enough. Is it better if you put transition property under the section of Hover? If so, when you hover over, there will be a transitional green box covering the font gradually.
    I learned a lot from here about how to control the transition action. I like the properties to control the duration, time-function and delay of transition.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s