122 lines
2.2 KiB
SCSS
122 lines
2.2 KiB
SCSS
svg#fish {
|
|
}
|
|
/* Fish Animation */
|
|
svg.fish{
|
|
overflow:visible;
|
|
}
|
|
|
|
@-webkit-keyframes swim
|
|
{
|
|
0% {left: -235px}
|
|
90% {left: calc(100% - 235px); width: 235px;}
|
|
100% {left: calc(100%); width: 0}
|
|
}
|
|
|
|
@keyframes swim
|
|
{
|
|
0% {left: -235px}
|
|
70% {left: calc(100% - 235px); width: 235px;}
|
|
100% {left: calc(100%); width: 0}
|
|
}
|
|
|
|
.fish{
|
|
width: 235px;
|
|
height: 104px;
|
|
left: -235px;
|
|
position: absolute;
|
|
opacity: 0.4;
|
|
animation: swim 20s;
|
|
-webkit-animation: swim 20s;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
-webkit-animation-timing-function: linear;
|
|
}
|
|
|
|
svg #fish1,
|
|
svg #fish2,
|
|
svg #fish3,
|
|
svg #fish4,
|
|
svg #fish5,
|
|
svg #fish6 {
|
|
fill:#528484;
|
|
|
|
-moz-animation: bounce 2s infinite;
|
|
-webkit-animation: bounce 2s infinite;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
svg #fish2{
|
|
animation-delay: 0.5s;
|
|
-webkit-animation-delay: 0.5s;
|
|
}
|
|
|
|
svg #fish3{
|
|
animation-delay: 0.2s;
|
|
-webkit-animation-delay: 0.2s;
|
|
}
|
|
|
|
svg #fish4{
|
|
animation-delay: 0.4s;
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
|
|
svg #fish5{
|
|
animation-delay: 0.1s;
|
|
-webkit-animation-delay: 0.1s;
|
|
}
|
|
|
|
svg #fish6{
|
|
animation-delay: 0.3s;
|
|
-webkit-animation-delay: 0.3s;
|
|
}
|
|
|
|
/**/
|
|
@-moz-keyframes bounce {
|
|
0%, 50%, 100% {
|
|
-moz-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
25% {
|
|
-moz-transform: translateY(-5px);
|
|
transform: translateY(-5px);
|
|
}
|
|
75% {
|
|
-moz-transform: translateY(-3px);
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
@-webkit-keyframes bounce {
|
|
0%, 50%, 100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
25% {
|
|
-webkit-transform: translateY(-5px);
|
|
transform: translateY(-5px);
|
|
}
|
|
75% {
|
|
-webkit-transform: translateY(-3px);
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
@keyframes bounce {
|
|
0%, 50%, 100% {
|
|
-moz-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
25% {
|
|
-moz-transform: translateY(-5px);
|
|
-ms-transform: translateY(-5px);
|
|
-webkit-transform: translateY(-5px);
|
|
transform: translateY(-5px);
|
|
}
|
|
75% {
|
|
-moz-transform: translateY(-3px);
|
|
-ms-transform: translateY(-3px);
|
|
-webkit-transform: translateY(-3px);
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|