3.1.x SnippetsCSS3 - Logo Shake

Snippets
Previous topicNext topic
User avatar

Topic Author
Ketchup
Users
Users
Magic user status: Offline
Posts: 20
Joined: Jan 16th, '16, 08:13
    Windows 10 Chrome

CSS3 - Logo Shake

Post by Ketchup »

Will shake your logo, built for default prosilver.

Demo: http://www.cssreset.com/demos/css3/webk ... boots.html

Code: Select all

.imageset.site_logo {display: inline-block; }

@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-2px, -1px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

.imageset.site_logo:hover, .imageset.site_logo:focus {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-transform-origin: 50% 50%;
}
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4777
Joined: Apr 6th, '14, 14:12
    Windows 10 Chrome

Re: CSS3 - Logo Shake

Post by martin »

This is better.

Code: Select all

.site_logo:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
Use this to install an ext on your board no more ftp or path making.
Path too install this ext is ext/boardtools/upload
Download is here Make it easy for us to solve your issues
User avatar

x8BiTw0LFx
Users
Users
Magic user status: Offline
Posts: 79
Joined: Nov 2nd, '15, 14:37
    Windows 10 Firefox

Re: CSS3 - Logo Shake

Post by x8BiTw0LFx »

Where should I put this in? CSS magic?
Image
User avatar

clight77
Donator
Donator
Magic user status: Offline
Posts: 435
Joined: Sep 24th, '15, 14:23
    Windows 10 Chrome

Re: CSS3 - Logo Shake

Post by clight77 »

x8BiTw0LFx wrote: Jun 23rd, '16, 15:11 Where should I put this in? CSS magic?
Add it to the very bottom.
User avatar

moffacostanzo
Users
Users
Magic user status: Offline
Posts: 149
Joined: Oct 30th, '15, 09:34
    Windows 7 Firefox

Re: CSS3 - Logo Shake

Post by moffacostanzo »

In witch file i must to insert this code
User avatar

clight77
Donator
Donator
Magic user status: Offline
Posts: 435
Joined: Sep 24th, '15, 14:23
    Windows 10 Chrome

Re: CSS3 - Logo Shake

Post by clight77 »

moffacostanzo wrote: Nov 5th, '16, 07:46 in witch file i must to insert this code
sorry read this wrong :(
.
Previous topicNext topic