Skip to content

Commit 6b2d425

Browse files
MeesJMeesJ
authored
Initial commit
0 parents  commit 6b2d425

14 files changed

+1864
-0
lines changed

‎animations.css

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
/* ************************************************************* */
2+
/*
3+
/* Use this file to add custom CSS animations.
4+
/* Delete this file if you wish to use the default animations.
5+
/* If you do not want to have animations in your theme,
6+
/* remove or comment them and include this file in your theme.
7+
/*
8+
/* ************************************************************* */
9+
10+
11+
/* Table of contents
12+
––––––––––––––––––––––––––––––––––––––––––––––––––
13+
- Entrance animations
14+
- Button hover animations
15+
- Icon hover animations
16+
- Footer hover animations
17+
18+
*/
19+
20+
21+
22+
/* Entrance animations
23+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
24+
25+
.button-entrance {
26+
animation-name: popUp;
27+
animation-duration: 1s;
28+
animation-fill-mode: both;
29+
/* Used to start button entrance animation one after another */
30+
animation-delay: calc(var(--delay)/10);
31+
}
32+
33+
@keyframes popUp {
34+
from {
35+
opacity: 0;
36+
transform: scale3d(0.3, 0.3, 0.3);
37+
}
38+
39+
50% {
40+
opacity: 1;
41+
}
42+
}
43+
44+
.fadein {
45+
animation-name: fadein;
46+
animation-duration: 3s;
47+
animation-fill-mode: both;
48+
}
49+
50+
@keyframes fadein {
51+
from {
52+
opacity: 0;
53+
}
54+
55+
to {
56+
opacity: 1;
57+
}
58+
}
59+
60+
61+
/* Button hover animations
62+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
63+
/* (Also apply to icon) */
64+
65+
.button-hover, .credit-hover, .social-hover{
66+
display:inline-block;
67+
-webkit-transform:perspective(1px) translateZ(0);
68+
transform:perspective(1px) translateZ(0);
69+
box-shadow:0 0 1px rgba(0,0,0,0);
70+
-webkit-transition-duration:.3s;
71+
transition-duration:.3s;
72+
-webkit-transition-property:transform;
73+
transition-property:transform
74+
}
75+
.button-hover:active,.credit-hover:active, .social-hover:active,
76+
.button-hover:focus,.credit-hover:focus, .social-hover:focus,
77+
.button-hover:hover,.credit-hover:hover, .social-hover:hover{
78+
-webkit-transform:scale(1.1);
79+
transform:scale(1.1)
80+
}
81+
82+
83+
/* Icon hover animations
84+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
85+
86+
.icon-hover{
87+
display:inline-block;
88+
-webkit-transform:perspective(1px) translateZ(0);
89+
transform:perspective(1px) translateZ(0);
90+
box-shadow:0 0 1px rgba(0,0,0,0);
91+
-webkit-transition-duration:.3s;
92+
transition-duration:.3s
93+
}
94+
.icon-hover .hvr-icon{
95+
-webkit-transform:translateZ(0);
96+
transform:translateZ(0)
97+
}
98+
.icon-hover:active .hvr-icon,.icon-hover:focus .hvr-icon,.icon-hover:hover .hvr-icon{
99+
-webkit-animation-name:icon-hover;
100+
animation-name:icon-hover;
101+
-webkit-animation-duration:1s;
102+
animation-duration:1s;
103+
-webkit-animation-timing-function:ease-in-out;
104+
animation-timing-function:ease-in-out;
105+
-webkit-animation-iteration-count:1;
106+
animation-iteration-count:1
107+
}
108+
109+
@-webkit-keyframes icon-hover{
110+
16.65%{
111+
-webkit-transform:translateY(6px);
112+
transform:translateY(6px)
113+
}
114+
33.3%{
115+
-webkit-transform:translateY(-5px);
116+
transform:translateY(-5px)
117+
}
118+
49.95%{
119+
-webkit-transform:translateY(4px);
120+
transform:translateY(4px)
121+
}
122+
66.6%{
123+
-webkit-transform:translateY(-2px);
124+
transform:translateY(-2px)
125+
}
126+
83.25%{
127+
-webkit-transform:translateY(1px);
128+
transform:translateY(1px)
129+
}
130+
100%{
131+
-webkit-transform:translateY(0);
132+
transform:translateY(0)
133+
}
134+
}
135+
@keyframes icon-hover{
136+
16.65%{
137+
-webkit-transform:translateY(6px);
138+
transform:translateY(6px)
139+
}
140+
33.3%{
141+
-webkit-transform:translateY(-5px);
142+
transform:translateY(-5px)
143+
}
144+
49.95%{
145+
-webkit-transform:translateY(4px);
146+
transform:translateY(4px)
147+
}
148+
66.6%{
149+
-webkit-transform:translateY(-2px);
150+
transform:translateY(-2px)
151+
}
152+
83.25%{
153+
-webkit-transform:translateY(1px);
154+
transform:translateY(1px)
155+
}
156+
100%{
157+
-webkit-transform:translateY(0);
158+
transform:translateY(0)
159+
}
160+
}
161+
162+
163+
/* Footer hover animations
164+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
165+
166+
.footer-hover{
167+
display:inline-block;
168+
-webkit-transform:perspective(1px) translateZ(0);
169+
transform:perspective(1px) translateZ(0);
170+
box-shadow:0 0 1px rgba(0,0,0,0);
171+
-webkit-transition-duration:.3s;
172+
transition-duration:.3s;
173+
-webkit-transition-property:transform;
174+
transition-property:transform;
175+
-webkit-transition-timing-function:ease-out;
176+
transition-timing-function:ease-out
177+
}
178+
.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
179+
-webkit-transform:translateY(-8px);
180+
transform:translateY(-8px)
181+
}

0 commit comments

Comments
 (0)