I am trying to build a shimmer loader with CSS3 keyframes animation inside shadow DOM. The shimmer works perfectly in Chrome & Safari, but the animation does not work in Firefox.
Here is a small snippet to reproduce the behaviour.
document.getElementById('myDiv').attachShadow({mode:'open'}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat !important;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head></head>
<body>
<div id="myDiv"></div>
</body>
</html>
Animation works only this is a problem with your example. The following example animates the background color and it works in firefox.
document.getElementById('myDiv').attachShadow({
mode: 'open'
}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background: red;
}
100% {
background: blue;
}
}
</style>
`
<div id="myDiv"></div>
Too much !important :) Remove important from .shimmer -> background
document.getElementById('myDiv').attachShadow({ mode: 'open' }).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`
<div id="myDiv"></div>
Related
I'm trying to create a text highlight animation in css like the one in this gif. From left to right continuously.
I tried this
<p>
The <span class="test">world</span>
</p>
.test {
background: linear-gradient(to top, red 50%, transparent 50%);
animation-name: highlight;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes highlight {
0% {
background-size: 0;
background-position: -100%, 0;
}
50% {
background-size: 100%;
background-position: 100%, 100%;
}
}
But it's giving some weird glitch effect instead. What am I doing wrong and how to achieve this?
You will need to use a pseudo element (preferably :after) and play around with the width of that pseudo element.
.test {
position: relative;
}
.test:after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Place the pseudo element right under the content */
top: 0;
left: 0;
background: linear-gradient(to top, red 50%, transparent 50%);
animation-name: highlight;
animation-duration: 0.75s;
animation-iteration-count: infinite;
animation-direction: alternate; /* Make the animation run back and forth */
}
#keyframes highlight {
0% {
width: 0;
opacity: 0;
}
50% {
width: 100%;
opacity: 1;
}
}
<p>
The <span class="test">world</span>
</p>
References:
Pseudo elements :after
I've created this snippet on Codepen: the earth rotates and the car moves. However, when car moves it makes the earth rotate too. I want all elements to go their own path.
Why does the car affect the earth, and how can that be avoided?
body {
background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
background-size: 1000px;
}
#firstimg {
background-image: url(http://www.21tech.ir/dfxhfgh.gif);
position: absolute;
background-repeat: no-repeat;
background-size: 100px;
animation: anim1 14s infinite linear;
margin: 40px;
}
#earth {
margin-left: 100px;
width: 500px;
height: 500px;
background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
border-radius: 50%;
background-size: 1000px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: brightness(50%);
}
#keyframes rotate {
from {
background-position-x: 0px;
}
to {
background-position-x: 1000px;
}
}
#keyframes anim1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
50% {
transform: translate(20px, 20px) rotate(10deg)
}
}
<div id="firstimg">
<div>
<div id="earth"></div>
You have not closed you firstimg div tag, hence it runs under a single div
<div id="firstimg"></div>
<div id="earth"></div>
Follow Codepen
.crossfade > div {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade {
height: 500px;
}
#fade1{
background-image: url('../images/taxi.jpg');
}
#fade2 {
animation-delay: 6s;
background-image: url('../images/default.jpg');
}
#fade3 {
animation-delay: 12s;
background-image: url('../images/neuroBG.JPG');
}
#fade4 {
animation-delay: 18s;
background-image: url('../images/new4.jpeg');
}
#fade5 {
animation-delay: 24s;
background-image: url('../images/new3.jpg');
}
#fade6 {
animation-delay: 30s;
background-image: url('../images/new1.jpg');
}
#fade7 {
animation-delay: 36s;
background-image: url('../images/new2.jpeg');
}
<div class="crossfade">
<div id="fade1"></div>
<div id="fade2"></div>
<div id="fade3"></div>
<div id="fade4"></div>
<div id="fade5"></div>
<div id="fade6"></div>
<div id="fade7"></div>
</div>
I will like to make a background image fade in and out just like this website www.flitways.com
I have tried replicate this but the images are not fading in properly. I just feel that there is something missing. Will appreciate any help as regards this. Thanks.
To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a #keyframes rule of their own.
For "n" images you must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n
animation-delay = t/n or = a+b
Percentage for keyframes:
0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
Src: http://css3.bradshawenterprises.com/cfimg/
.crossfade > div {
animation: imageAnimation 8s linear infinite;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.crossfade {
height: 500px;
}
#keyframes imageAnimation {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
.crossfade div:nth-of-type(1) {
background-image: url(http://placehold.it/200/f00);
animation-delay: 6s;
}
.crossfade div:nth-of-type(2) {
background-image: url(http://placehold.it/200/0b0);
animation-delay: 4s;
}
.crossfade div:nth-of-type(3) {
background-image: url(http://placehold.it/200/00f);
animation-delay: 2s;
}
.crossfade div:nth-of-type(4) {
background-image: url(http://placehold.it/200/ff0);
animation-delay: 0;
}
<div class="crossfade">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Please look at my code
Html :
`<div id="animated-example" class="animated swing"><div class="navbar"></div></div>`
Css :
.animated {
color: #9f9f9f;
min-height: 300px;
width: 100%;
padding-bottom: 24px;
background: #000000 url(../images/icons.svg) repeat center;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration:15s;
-moz-animation-duration:15s;
-o-animation-duration:15s;
animation-duration:15s;}
.navbar {
position: absolute;
min-height: 300px;
width: 100%;
padding-top: 24px;
background-image: -o-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: -moz-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: -ms-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(-179deg, #000000 0%, rgba(0,0,0,0.00) 100%);
}
#-webkit-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#-moz-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#-o-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
.swing {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: swing;
animation-name: swing;
}
The problem is that the animation does not work in Firefox, but Chrome and other browsers work
Please see the video below, it speaks
http://sendvid.com/b1r3hofg
How about this:
.swing {
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
animation-name: swing;
}
If this doesn't work, while it could be another code issue and you probably already know this, I'll just mention some CSS properties (transitions especially) are browser-dependent (meaning they only work for certain browsers)...although what you are doing seems like it should work.
Whatever the case, I wish you good luck friend! :)
I Fixed it :
#keyframes swing {
0% {
background-position: 0 511px;
}
100% {
background-position:0
}
}
i can't do somethings with css in tidesdk
I tried to do a css circles, i'm using 1.3.1-beta, but it doesn't work, i don't know what i'm doing wrong.
Can you help me?
<html>
<head>
<title>Sample</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="advanced" class="circle"></div>
</body>
</html>
and i use this
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}
#advanced {
width: 200px;
height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
i used this in chrome and this work but not in tidesdk app
Edit:
I found this old method to do blur, it's not conventional, but it looks like TideSDK does'nt accept css3 =(
HTML:
<div id="container">
<div />
<div class="blur" />
</div>
CSS:
#container{ overflow: hidden; position: relative; width: 200px;
height: 200px;}
#container div{
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 200px;
height: 200px;
border-radius: 40px;
background: orange;
}
#container div.blur:hover{opacity: 0.6; background: white;}
#container div.blur{opacity: 0; }
It seems tideSDK have problems with percentage border radius and the new gradient syntax -webkit-radial-gradient. I suggest you to use the old syntax for the gradient. You can find the working code sample below. Modify the colors and the color positions as you wish.
.circle {
-webkit-border-radius: 100px;
display: inline-block;
margin-right: 20px;
}
#advanced {
width: 200px;
height: 200px;
background: -webkit-gradient(radial, 40% 40%, 20, 50% 50%, 250, from(yellow), to(red));
}
For more information about -webkit-gradient syntax, read this article.