CODEWITHSUNDEEP
htmlcss
YoungForch
YoungForch

Reputation: 55

Trying To Figure Out CSS Animations

I've been trying to animate a headline element in CSS so that when hovered it rotates the text forward. I've read through loads of tutorials and managed to get it rotating clockwise (or anticlockwise) but not how I want (forward, as if it's spinning towards me).

A great example of the effect I am after is displayed at http://disruptltd.com/ when you hover the navigation links.

If anyone could tell me if that's possible using CSS or any information on how to achieve that effect I'd be massively appreciative

Here is the closest I've come so far, using this code :

.navigation h1:hover {
  display: inline-block;
  -moz-animation: spin-reverse 2s infinite linear;
  -o-animation: spin-reverse 2s infinite linear;
  -webkit-animation: spin-reverse 2s infinite linear;
  animation: spin-reverse 2s infinite linear;
}

@-moz-keyframes spin-reverse {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(-359deg); }
}
@-webkit-keyframes spin-reverse {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-359deg); }
}
@-o-keyframes spin-reverse {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(-359deg); }
}
@-ms-keyframes spin-reverse {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(-359deg); }
}
@keyframes spin-reverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-359deg); }
}

I've also made a jfiddle : http://jsfiddle.net/qzxbd5fz/

So basically I want the effect to look like it's spinning towards me, similar to a slot machine as opposed to this clock hand spinning style effect.

Thanks in advance

Upvotes: 3

Views: 318

Answers (2)

Terry
Terry

Reputation: 66103

Here is a rather simple example I have deviced, by slightly modifying your markup. As the slot machine spinning effect requires depth, it means that we need some kind of wrapping so that we can declare a perspective value to the parent element:

<h1><span>SITE LOGO</span></h1>

The slot machine effect involves the following:

  1. Giving depth to the element, so that when it's facing backwards (away from you), it is further away from the screen/viewer
  2. Using scale the resize the element, since we are going to translate the element on the Z axis to give the depth effect

The code is as follow, and a sample fiddle can be seen here: http://jsfiddle.net/teddyrised/qzxbd5fz/2/. To better demonstrate the effect I have opted to use CSS transition, but you can always convert it back to animation.

h1 {
    background: #eee;
    padding: 30px;
    perspective: 100px;
}
h1 span {
    display: block;
    text-align: center;
    transition: all 1s ease-in-out;
    -webkit-transform: rotateX(0) translateZ(50px) scale(0.5);
}
h1:hover span {
    -webkit-transform: rotateX(-360deg) translateZ(50px) scale(0.5);
}

More importantly, you can use backface-visibility: hidden on the <span> element to prevent the text from showing through when rotated -180deg away from the viewer along the X axis.

A simpler solution

After seeing that OP has clarified what kind of effect he wants to see, perhaps a simple translation trick with pseudo-elements will do fine.

The thing is that in order to have the effect as mentioned on the sample page linked, you will need to duplicate the site logo text in one way or another — I don't recommend using HTML to do so, because it has no semantic meaning (imagine a search engine reading two "Home" links). Instead, you can use either pseudo-elements (which require updating when you change the logo titles) or JS to duplicate the text. Here I have decided to use pseudo-elements for a pure CSS approach.

View the demo here: http://jsfiddle.net/teddyrised/qzxbd5fz/3/

Again, use the following markup:

<h1><span>SITE LOGO</span></h1>

For your CSS:

h1 {
    background: #000;
    font-family: Arial;
    overflow: hidden;
}
h1 span {
    color: #fff;
    transition: all .25s ease-in-out;
}
h1 span, h1 span::after {
    display: inline-block;
    position: relative;
}
h1 span::after {
    content: 'SITE LOGO';
    color: #1ddfb3;
    -webkit-transform: translate3D(-100%, 100%, 0);
}
h1:hover span {
    -webkit-transform: translateY(-100%);
}

Upvotes: 2

Akshay
Akshay

Reputation: 14348

Try this http://jsfiddle.net/qzxbd5fz/1/

This is what I've added 

h1{
    -webkit-transition:font-size 3s ;
}
h1:hover {
    display: inline-block;
    font-size:50px;
}

Upvotes: 2

Related Questions