CSS Shake timing

CSS Shake timing
0

#1

I’m using CSS Shake in my portfolio project and it works fine.

But the text shakes on hover and I would like it to shake every 30 seconds ALSO.

How can I customize this? Is it possible? I don’t want the anwer, need to do it by myself, but some “light” would be great

Thats the css I’m using (shake-rotate):

/*! * * * * * * * * * * * * * * * * * * * *\
CSShake :: shake-rotate
v1.5.0
CSS classes to move your DOM
© 2015 @elrumordelaluz
http://elrumordelaluz.github.io/csshake/
Licensed under MIT
* * * * * * * * * * * * * * * * * * * * */
.shake-rotate {
display: inline-block;
transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant–hover:hover,
.shake-trigger:hover .shake-constant.shake-constant–hover {
animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-rotate:hover,
.shake-trigger:hover .shake-rotate {
animation-play-state: running; }

@keyframes shake-rotate {
2% {
transform: translate(0, 0) rotate(7.5deg); }
4% {
transform: translate(0, 0) rotate(2.5deg); }
6% {
transform: translate(0, 0) rotate(2.5deg); }
8% {
transform: translate(0, 0) rotate(-0.5deg); }
10% {
transform: translate(0, 0) rotate(2.5deg); }
12% {
transform: translate(0, 0) rotate(-5.5deg); }
14% {
transform: translate(0, 0) rotate(0.5deg); }
16% {
transform: translate(0, 0) rotate(0.5deg); }
18% {
transform: translate(0, 0) rotate(2.5deg); }
20% {
transform: translate(0, 0) rotate(1.5deg); }
22% {
transform: translate(0, 0) rotate(-5.5deg); }
24% {
transform: translate(0, 0) rotate(3.5deg); }
26% {
transform: translate(0, 0) rotate(4.5deg); }
28% {
transform: translate(0, 0) rotate(5.5deg); }
30% {
transform: translate(0, 0) rotate(0.5deg); }
32% {
transform: translate(0, 0) rotate(-0.5deg); }
34% {
transform: translate(0, 0) rotate(6.5deg); }
36% {
transform: translate(0, 0) rotate(4.5deg); }
38% {
transform: translate(0, 0) rotate(-5.5deg); }
40% {
transform: translate(0, 0) rotate(6.5deg); }
42% {
transform: translate(0, 0) rotate(-4.5deg); }
44% {
transform: translate(0, 0) rotate(6.5deg); }
46% {
transform: translate(0, 0) rotate(1.5deg); }
48% {
transform: translate(0, 0) rotate(-6.5deg); }
50% {
transform: translate(0, 0) rotate(6.5deg); }
52% {
transform: translate(0, 0) rotate(4.5deg); }
54% {
transform: translate(0, 0) rotate(-6.5deg); }
56% {
transform: translate(0, 0) rotate(-5.5deg); }
58% {
transform: translate(0, 0) rotate(7.5deg); }
60% {
transform: translate(0, 0) rotate(3.5deg); }
62% {
transform: translate(0, 0) rotate(6.5deg); }
64% {
transform: translate(0, 0) rotate(2.5deg); }
66% {
transform: translate(0, 0) rotate(-4.5deg); }
68% {
transform: translate(0, 0) rotate(-3.5deg); }
70% {
transform: translate(0, 0) rotate(-3.5deg); }
72% {
transform: translate(0, 0) rotate(0.5deg); }
74% {
transform: translate(0, 0) rotate(-5.5deg); }
76% {
transform: translate(0, 0) rotate(4.5deg); }
78% {
transform: translate(0, 0) rotate(-1.5deg); }
80% {
transform: translate(0, 0) rotate(1.5deg); }
82% {
transform: translate(0, 0) rotate(2.5deg); }
84% {
transform: translate(0, 0) rotate(0.5deg); }
86% {
transform: translate(0, 0) rotate(-2.5deg); }
88% {
transform: translate(0, 0) rotate(7.5deg); }
90% {
transform: translate(0, 0) rotate(4.5deg); }
92% {
transform: translate(0, 0) rotate(-6.5deg); }
94% {
transform: translate(0, 0) rotate(0.5deg); }
96% {
transform: translate(0, 0) rotate(5.5deg); }
98% {
transform: translate(0, 0) rotate(-6.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }

.shake-rotate:hover,
.shake-trigger:hover .shake-rotate, .shake-rotate.shake-freeze, .shake-rotate.shake-constant {
animation-name: shake-rotate;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; }


#2

Use jQuery to set interval and in function that runs on that interval add css class, when it finishes remove css class. Simple as that.