I have an AMP page (webstory) that i developed with some css animations. I have noticed that what worked before (it was everything ok) now does not!
As long as we use third-part scripts i think somethin has changes since i have developed the solution that doesnt now allow css animations anymore.
Does anybody knows what has changed?
I have tested the css into a ‘normal’ html page and its ok. So the problem is not with my css.
body{background-color:red;}
.circles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden
}
.circles li{
position:absolute;
display:block;
list-style:none;
width:20px;
height:20px;
background:rgba(255,255,255,.2);
animation:25s linear infinite animate;
bottom:-150px
}
.circles li:first-child{
left:25%;
width:80px;
height:80px;
animation-delay:0s
}
.circles li:nth-child(2){
left:10%;
width:20px;
height:20px;
animation-delay:2s;
animation-duration:12s
}
.circles li:nth-child(3){
left:70%;
width:20px;
height:20px;
animation-delay:4s
}
.circles li:nth-child(4){
left:40%;
width:60px;
height:60px;
animation-delay:0s;
animation-duration:18s
}
.circles li:nth-child(5){
left:65%;
width:20px;
height:20px;
animation-delay:0s
}
.circles li:nth-child(6){
left:75%;
width:110px;
height:110px;
animation-delay:3s
}
.circles li:nth-child(7){
left:35%;
width:150px;
height:150px;
animation-delay:7s
}
.circles li:nth-child(8){
left:50%;
width:25px;
height:25px;
animation-delay:15s;
animation-duration:45s
}
.circles li:nth-child(9){
left:20%;
width:15px;
height:15px;
animation-delay:2s;
animation-duration:35s
}
.circles li:nth-child(10){
left:85%;
width:150px;
height:150px;
animation-delay:0s;
animation-duration:11s
}
@keyframes steam {
0% {
background-position: 0 0
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
@keyframes cube{
from{
transform:scale(0) rotate(0) translate(0%,-5%);
opacity:1
}
to{
transform:scale(20) rotate(960deg) translate(-50%,-50%);
opacity:0
}
}
@keyframes cube{
from{
transform:scale(0) rotate(0) translate(0%,-5%);
opacity:1
}
to{
transform:scale(20) rotate(960deg) translate(-50%,-50%);
opacity:0
}
}
@keyframes gradient{
0%,100%{
background-position:0 0
}
50%{
background-position:100% 100%
}
}
@keyframes wave{
100%,2%{
transform:translateX(1)
}
25%,75%{
transform:translateX(-25%)
}
50%{
transform:translateX(-50%)
}
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
@keyframes slide{
0%{
transform:translateX(-25%)
}
100%{
transform:translateX(25%)
}
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>I have noticed on browser console a new class loaded from the google js:
[template=fill]:not(.i-amphtml-story-grid-template-with-full-bleed-animation)>* {
bottom: 0 !important;
height: auto !important;
left: 0 !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: auto !important;}