svg#Linaro-Sprinkle {background-color: fff;height: 350px;width: auto;}
svg#Linaro-Sprinkle > path.purple{
transform: translateY(0); animation: popup 10s linear infinite;
} svg#Linaro-Sprinkle > path.red{
transform: translateY(0); animation: popup-small 9s linear infinite;
} svg#Linaro-Sprinkle > path.green-big{
transform: translateY(0); animation: popup 10s linear infinite;
} svg#Linaro-Sprinkle > path.green{
transform: translateY(0); animation: popup 7s linear infinite;
} svg#Linaro-Sprinkle > path.purple-big{
transform: translateY(0); animation: popup-small 8s linear infinite;
} svg#Linaro-Sprinkle > path.pink{
transform: translateY(0); animation: popup-small 11s linear infinite;
}
svg#Linaro-Sprinkle > path {
opacity: .4;
} svg#Linaro-Sprinkle:hover > path {
animation: to-start .3s ease; transform: translateY(0); opacity: .7;
}
@keyframes to-start {
0% { transform: translateY(40px); opacity:.4; } 10% { transform: translateY(35px); opacity:.425; } 20% { transform: translateY(30px); opacity:.45; } 30% { transform: translateY(25px); opacity:.475; } 40% { transform: translateY(20px); opacity:.5; } 50% { transform: translateY(15px); opacity:.55; } 60% { transform: translateY(10px); opacity:.6; } 70% { transform: translateY(5px); opacity:.625; } 80% { transform: translateY(0px); opacity:.65; } 90% { transform: translateY(0px); opacity:.675; } 100% { transform: translateY(0); opacity:.7; }
}
@keyframes popup {
0% { transform: translateY(0); } 10% { transform: translateY(20px); } 20% { transform: translateY(40px); } 30% { transform: translateY(60px); } 35% { transform: translateY(80px); } 40% { transform: translateY(100px); } 45% { transform: translateY(120px); } 50% { transform: translateY(140px); } 55% { transform: translateY(120px); } 60% { transform: translateY(100px); } 65% { transform: translateY(80px); } 70% { transform: translateY(60px); } 80% { transform: translateY(40px); } 90% { transform: translateY(20px); } 100% { transform: translateY(0); }
}
@keyframes popup-small {
0% { transform: translateY(0); } 10% { transform: translateY(20px); } 20% { transform: translateY(40px); } 30% { transform: translateY(60px); } 40% { transform: translateY(70px); } 50% { transform: translateY(75px); } 60% { transform: translateY(70px); } 70% { transform: translateY(60px); } 80% { transform: translateY(40px); } 90% { transform: translateY(20px); } 100% { transform: translateY(0); }
}
svg#Linaro-Sprinkle .cls-1,svg#Linaro-Sprinkle .cls-6 {
fill:#9c3 ;
} svg#Linaro-Sprinkle .cls-2,svg#Linaro-Sprinkle .cls-3 {
fill:#c03;
} svg#Linaro-Sprinkle .cls-3{
opacity:0.6;
} svg#Linaro-Sprinkle .cls-4,svg#Linaro-Sprinkle .cls-5 {
fill:#909;
} svg#Linaro-Sprinkle .cls-5,svg#Linaro-Sprinkle .cls-6 {
opacity:0.7;
}