crazy pulse
selector {
animation: horizontal-shaking 1s ease infinite;
}
@keyframes horizontal-shaking {
0%{
transform:scale(1);
}
5%{
transform:scale(1);
}
10%{
transform:scale(1.1);
}
15%{
transform:scale(1);
}
20%{
transform:scale(1.1);
}
25%{
transform:scale(1);
}
30%{
transform:scale(1.1);
}
35%{
transform:scale(1);
}
100%{
transform:scale(1);
}
pulse (sporadically)
selector {
animation: pulse-new 7s ease infinite;
}
@keyframes pulse-new{
0%{
transform:scale(1);
}
5%{
transform:scale(1);
}
10%{
transform:scale(1.1);
}
15%{
transform:scale(1);
}
20%{
transform:scale(1.1);
}
25%{
transform:scale(1);
}
30%{
transform:scale(1.1);
}
35%{
transform:scale(1);
}
100%{
transform:scale(1);
}
}
left/right
selector {
animation: shake 5s infinite;
}
selector: {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
selector:hover {
animation-play-state: paused;}
@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);
}
}
pulse
selector {
animation: pulse 1s infinite;
}
selector:hover {
animation-play-state: paused;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
shake
selector {
animation: shake-animation 4.72s ease infinite;
transform-origin: 50% 50%;
}
.element {
margin: 0 auto;
width: 150px;
height: 150px;
background: red;
}
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}