i think everything all ok but stil not working...
ff - ok
edge, opera, more - not working good (adds a pause at the end ... sometimes skips the last few frames)
#box{
overflow: hidden;
width: 416px;
height: 416px;
margin: 0px;
padding: 0px;
display: inline-block;
border: 0px;
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
#tlo{
width: 12064px;
height: 416px;
background-image:
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
background-repeat: no-repeat;
background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
position: relative;
left: 0;
top: 0;
}
#tlo:hover{
animation-name: tlo-tumb-animacja;
animation-duration: 1s;
animation-timing-function: steps(28);
animation-iteration-count: infinite;
}
#keyframes tlo-tumb-animacja {
from {transform: translateX(0);}
to {transform: translateX(-96.55172414%);}
}
<h2>everyimages:</h2><br>
<div id="box1">
<div id="tlo">
</div>
</div>
<h2>animation:</h2>
<div id="box">
<div id="tlo">
</div>
</div>
does it take some time to return to position zero ... more than one frame?
is the number of elements translated into div's length a problem?
where is the mistake? browsers (console) say everything is ok ... no bugs ...
Codepen
One way round this 'flashing' problem is to have two complete copies of the background images.
Then just have half the number of steps and translate to -50% instead of -100%.
This helps because the whole thing repositions itself but to the same visual effect as when it's 50% translated so there is no jump.
Just for demo I've cut it in half so there are 14 steps (so I didn't copy the background again) but of course you'll want to put all your 28 images in twice for the real use.
* {
margin: 0;
}
#box{
overflow: hidden;
width: 416px;
height: 416px;
margin: 0px;
padding: 0px;
display: inline-block;
border: 0px;
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
#tlo{
width: 12064px;
height: 416px;
background-image:
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg'), url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
background-repeat: no-repeat;
background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
position: relative;
left: 0;
top: 0;
}
#tlo:hover{
animation-name: tlo-tumb-animacja;
animation-duration: 1s;
animation-timing-function: steps(14);
animation-iteration-count: infinite;
}
#keyframes tlo-tumb-animacja {
from {transform: translateX(0);}
to {transform: translateX(-50%);}
}
<h2>everyimages:</h2><br>
<div id="box1">
<div id="tlo">
</div>
</div>
<h2>animation:</h2>
<div id="box">
<div id="tlo">
</div>
</div>
still working ... add preload for css like Preloading CSS Images
... did not help
but now I see - #box with css {overflow: hidden; & more} have problem ...
#box1 without css works fine
when i use 8 pic> all alright ... 29> problem ... too long div? no - #box1 works!
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka08.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka09.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka12.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka13.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg')
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
}
* {
margin: 0;
}
#box{
overflow: hidden;
width: 416px;
height: 416px;
margin: 0px;
padding: 0px;
display: block;
border: 0px;
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
#tlo{
width: 12064px;
height: 416px;
background-image:
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka00.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka01.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka02.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka03.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka04.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka05.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka06.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka07.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka08.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka09.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka10.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka11.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka12.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka13.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka14.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka15.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka16.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka17.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka18.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka19.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka20.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka21.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka22.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka23.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka24.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka25.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka26.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka27.jpg'),
url('https://serwer1816342.home.pl/nowa2021/portfolio/czolowka/czolowka28.jpg');
background-repeat: no-repeat;
background-position: 0px, 416px, 832px, 1248px, 1664px, 2080px, 2496px, 2912px, 3328px, 3744px, 4160px, 4576px, 4992px, 5408px, 5824px, 6240px, 6656px, 7072px, 7488px, 7904px, 8320px, 8736px, 9152px, 9568px, 9984px, 10400px, 10816px, 11232px, 11648px;
position: relative;
left: 0;
top: 0;
}
#tlo:hover{
animation-name: tlo-tumb-animacja;
animation-duration: 1s;
animation-timing-function: steps(29);
animation-iteration-count: infinite;
}
#keyframes tlo-tumb-animacja {
from {
transform: translateX(0);
}
to {
transform: translateX(-12064px);
}
}
<h2>animation:</h2>
<div id="box">
<div id="tlo">
</div>
</div>
<h2>everyimages:</h2><br>
<div id="box1">
<div id="tlo">
</div>
</div>
Related
(Note: This was asked [exactly] 1½ years ago and had [exactly] zero activity... I'm apparently having the same issue so hopefully OP #Jaffa won't mind me piggybacking in it, and slapping a bounty on it to [hopefully] generate some interest!)
The OP's original question is below, and my added issue & examples is below that.
[Original Question:]
I am trying to animate a zoom out effect on an SVG. I have gotten it working, but the first frame, which is scaled to 30, is blurry/pixelated in Firefox.
Firefox:
Chrome:
I do not see the same issue in Chrome or Edge. The initial frame is crisp as I would expect being an SVG.
html,
body {
margin: 0px;
padding: 0px;
}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.img_zoom {
width: 400px;
height: 500px;
margin: 2em auto 2em auto;
overflow: hidden;
}
.zoom {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
animation: zoom 5s ease-in-out 4s 1 normal forwards;
transform: translate(3400px, -3600px) scale(30);
}
#keyframes zoom {
to {
margin-left: 0;
transform: translate(0px, 0px) scale(0.7);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="img_zoom">
<div class="zoom"><img src="https://flexion.tech/images/box-con.svg"></div>
</div>
</div>
</body>
</html>
Code pen is here for review:
https://codepen.io/jaffa80/pen/KKpxgeQ
Any ideas how I can fix the blurry issue in Firefox?
Another problem i am having is if I remove margin-left:0 from the #keyframe to, things stop working. Any pointers on this would be appreciated also.
EDIT:
I have a rounded div container containing several elements to position text within the circle. I need the circle to "grow" when the user gets to it, so I figured I'd use transform:scale() with a transition or animation.
However, only in Firefox, the text is blurry until the transition (or animation) is complete. Oddly, the border of the circle remains perfectly sharp (I think?).
Thinking maybe it needed a moment to pre-render, I've tried delaying with setTimeout alone, as well as combining with events (open & DOMContentLoaded) and with requestAnimationFrame. I also tried using css animation instead of transition.
Nothing seems to make a difference in Firefox, yet Chrome and Edge seem fine. Is there a prefix that I don't know about, or is this maybe a rendering bug in Firefox?
My MCSE is the snippet below:
setTimeout(function(){
circ.classList.remove('shrunk');
},500);
body{ font-family:'fira code'; font-size:20px; }
#circ{ position:relative; border:3px solid blue; border-radius:50%; text-align:center; white-space: nowrap; transition:transform 1000ms; }
#circ span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.shrunk{ transform:scale(0.1); }
<div class='shrunk' id='circ' style='width:336px; height:336px;'>
<span>Lorem<br>Ipsum is simply<br>dummy text of the<br>printing and typesetting<br>industry. Lorem Ipsum has<br>been the industry's<br>standard dummy text ever<br>since the 1500s, when an<br>unknown printer took a<br>galley of type and<br>scrambled it to make<br>a type specimen<br>book.</span>
</div>
Any suggestions or workarounds?
I can only guess why this happens. Firefox is taking a snapshot before starting the animation / transition (by adding the class to the tag) and then when the transition ends. Maybe Firefox is taking more than two snapshots. But as you can see in the snippet below, the animation label is still blurred and waiting for when the animation is finished; the blur then disappears immediately. I think Firefox does this optimization for better performance.
The CSS property will-change also does not solve this problem if reset to initial .
setTimeout(function() {
circ.classList.add('shrunk');
}, 2000);
body {
display: flex;
flex-flow: column;
font-family: 'fira code';
gap: 2rem;
}
.circles,
.titles {
width: 100%;
display: flex;
gap: 2rem;
}
h4 {
width: 105px;
font-size: 0.8rem;
}
#circ,
#circ2,
#circ3,
#circ4 {
width: 100px;
height: 100px;
position: relative;
border: 3px solid blue;
border-radius: 50%;
text-align: center;
word-break: break-all;
}
#circ {
transition: transform 1000ms;
transform: scale(0.1);
}
#circ2 {
animation: forwardAnim 5s linear forwards;
}
#circ3 {
animation: forwardAnim 5s linear forwards;
backface-visibility: hidden;
}
#circ4 {
animation: forwardAnim 5s linear forwards;
transform-style: preserve-3d;
}
#circ span,
#circ2 span,
#circ3 span,
#circ4 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#circ.shrunk {
transform: scale(1);
}
#keyframes forwardAnim {
0% {
transform: scale(0.1);
}
45% {
transform: scale(0.1);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="circles">
<div id="circ">
<span>This is my text!</span>
</div>
<div id="circ2">
<span>This is my text!</span>
</div>
<div id="circ3">
<span>This is my text!</span>
</div>
<div id="circ4">
<span>This is my text!</span>
</div>
</div>
<div class="titles">
<h4>Add class with transition</h4>
<h4>Animation</h4>
<h4>Animation with backface-visibility: hidden</h4>
<h4>Animation with transform-style: preserve-3d</h4>
</div>
To avoid this you could use backface-visibility: hidden;as #nullptr mentions above, or transform-style: preserve-3d;* for a smoother transition.
setTimeout(function() {
circ.classList.remove('shrunk');
}, 500);
setTimeout(function() {
circ2.classList.remove('shrunk');
}, 500);
body {
display: flex;
flex-flow: column;
font-family: 'fira code';
gap: 2rem;
font-size: 0.9rem;
}
.circles,
.titles {
width: 100%;
display: flex;
gap: 2rem;
}
h4 {
width: 255px;
font-size: 0.8rem;
text-align: center;
}
#circ,
#circ2 {
width: 250px;
height: 250px;
position: relative;
border: 3px solid blue;
border-radius: 50%;
text-align: center;
white-space: nowrap;
transition: transform 1000ms;
}
#circ {
backface-visibility: hidden;
}
#circ2 {
transform-style: preserve-3d;
}
#circ span,
#circ2 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.shrunk {
transform: scale(0.1);
}
<div class="circles">
<div class="shrunk" id="circ">
<span>Lorem<br />Ipsum is simply<br />dummy text of the<br />printing and
typesetting<br />industry. Lorem Ipsum has<br />been the industry's<br />standard
dummy text ever<br />since the 1500s, when an<br />unknown printer
took a<br />galley of type and<br />scrambled it to make<br />a type
specimen<br />book.</span
>
</div>
<div class="shrunk" id="circ2">
<span
>Lorem<br />Ipsum is simply<br />dummy text of the<br />printing and
typesetting<br />industry. Lorem Ipsum has<br />been the industry's<br />standard
dummy text ever<br />since the 1500s, when an<br />unknown printer
took a<br />galley of type and<br />scrambled it to make<br />a type
specimen<br />book.</span
>
</div>
</div>
<div class="titles">
<h4>backface-visibility: hidden;</h4>
<h4>transform-style: preserve-3d;</h4>
</div>
Another way to avoid blurred content inside the circle is to remove position: absolute if it's not critical, and instead align content with display: flex on the parent element.
setTimeout(function() {
circ.classList.remove('shrunk');
}, 500);
body {
font-family: 'fira code';
font-size: 20px;
}
#circ {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: 3px solid blue;
border-radius: 50%;
text-align: center;
white-space: nowrap;
transition: transform 1000ms;
}
.shrunk {
transform: scale(0.1);
}
<div class="shrunk" id="circ" style="width: 336px; height: 336px">
<span>Lorem<br />Ipsum is simply<br />dummy text of the<br />printing and
typesetting<br />industry. Lorem Ipsum has<br />been the industry's<br />standard
dummy text ever<br />since the 1500s, when an<br />unknown printer took
a<br />galley of type and<br />scrambled it to make<br />a type
specimen<br />book.</span
>
</div>
I ran into this issue a few years back, although I think I had it on chrome and not Firefox. But this seems to solve the issue in Firefox too.
Add backface-visibility: hidden to your transforming component. This will make it so that only the front face of the element is animated, instead of both the front and the back faces.
setTimeout(function(){
circ.classList.remove('shrunk');
},500);
body{ font-family:'fira code'; font-size:20px; }
#circ{ position:relative; border:3px solid blue; border-radius:50%; text-align:center; white-space: nowrap; transition:transform 1000ms; backface-visibility: hidden; }
#circ span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.shrunk{ transform:scale(0.1); }
<div class='shrunk' id='circ' style='width:336px; height:336px;'>
<span>Lorem<br>Ipsum is simply<br>dummy text of the<br>printing and typesetting<br>industry. Lorem Ipsum has<br>been the industry's<br>standard dummy text ever<br>since the 1500s, when an<br>unknown printer took a<br>galley of type and<br>scrambled it to make<br>a type specimen<br>book.</span>
</div>
As to why it works, I really have no idea. But do try it and let me know it if works for you.
I have a requirement that can be solved using a marquee
.ticker {
white-space: no-wrap;
}
.item {
display: inline-block;
cursor: pointer;
}
<marquee class="ticker" onmouseover="this.stop()" onmouseout="this.start()">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</marquee>
How do we make this compliant with html5 since marquee is deprecated?
I have seen a few examples, but most of them rely on fixed width.
In my example, the items are received from the server so there can be a lot of them. Also, I will need that stop on hover since the items are links to something else.
Thank you very much for your help,
PS: I want to make sure we can't do this in CSS only before I start exploring javascript.
This codepen has a great example of what you're looking for.
To make it pause on hover, I added a hover state to pause the animation:
https://codepen.io/anon/pen/zzpZyg
.marquee:hover div {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
.marquee:hover div {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
Sorry I know I am late. However, I have a simple solution to create a marquee with CSS.
.marquee-container{
overflow:hidden;
}
.marquee{
min-width:100%;
animation: marquee 15s linear infinite;
}
.marquee:hover{
animation-play-state: paused;
}
#keyframes marquee {
from{margin-left : 120%;}
to{margin-left: -20%;}
}
<div class="marquee-container">
<p class="marquee">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</p>
</div>
Finally I found one that works, and here is the finally product https://fiddle.sencha.com/#view/editor&fiddle/228u
Here is the original one, https://codepen.io/lewismcarey/pen/GJZVoG
<div class="wrapper">
<div class="container">
<span>Span Me 1</span>
<span>Span Me 2</span>
<span>Span Me 3</span>
<span>Span Me 4</span>
</div>
</div>
The trick was to "left-pad" the wrapper to hide the container initially. Then, "right-pad" the container so that the animation only stops/restarts once the container has gone off screen. Both padding are sized relatively. display: block; is added to the container so that the right padding uses the wrapper's size. And finally, we add an animation on the wrapper's transform attribute.
Thank you all,
I am no good at java script
but here is it using html and css
PS. that mouse over thing is not working here
.wrapper {
position: relative;
overflow: hidden;
height: 25px;
width: 100px;
border: 1px solid orange;
}
.wrapper p {
position: absolute;
margin: 0;
line-height: 25px;
white-space: nowrap;
animation: marquee 5s linear infinite;
}
#keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
<div class="wrapper">
<p>Hey, how you're doing? .</p>
</div>
There are lots of information on google about it, just search: "css3 marque", like Neil Kennedy mentioned. One question is very similar to yours and the text stops scrolling after you hover over it. Check this link below: CSS3 Marquee Effect and jsfiddle: http://jsfiddle.net/MaY5A/1/
$(".toggle").on("click", function() {
$(".marquee").toggleClass("microsoft");
});
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
border: 1px green solid;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
border: 1px red solid;
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before,
.microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em;
left: -1em;
width: .5em;
height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;
}
.microsoft:after,
.microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255, 255, 255, 0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Wanted to see how easily marquees could be constructed with CSS:
- This demo uses -prefix-free to avoid vendor prefixes
- It also requires manual setting of the end text-indent
- Everything below the /* Make it pretty */ comment is non-essential
- Brought to you by #jonathansampson -->
<p class="microsoft marquee"><span>Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the Start screen, charms, and a Microsoft account, you can spend less time searching and more time doing.</span></p>
<button class="toggle">Toggle Beautification</button>
<p class="vanity">
#jonathansampson of
#appendTo
</p>
I'm trying to reveal text from the center against an element that has a background image. If I make the background of the animation a solid color, then that solid color appears around the text until the animation is done. If I put the same background image behind the text as is the behind the containing element, then a different version of that same image appears around my text. Any suggestions?
html:
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<h4 class="showhead">My heading</h4>
</div>
</div>
css:
#the-wall {
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.chapter-hed h4 {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
}
.chapter-hed h4:before {
left:0;
}
.chapter-hed h4:after {
right:0;
}
.chapter-hed h4:after,.chapter-hed h4:before {
position:absolute;
content:"";
height:100%;
height: 109px;
/*background:black;*/
background-image: url(../img/wopo-3.png);
background-position: center;
background-size: cover;
background-color: black;
}
.showhead:after, .showhead:before {
animation: revealText 4s;
animation-fill-mode:forwards;
}
#keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
I have added 2 wrappers for your class. One slides to the left, the other to the right. The net effect is that the element keeps centered, and is revealed progressively
#the-wall {
background-image: url(http://lorempixel.com/400/200);
background-position: center;
background-size: cover;
background-color: black;
}
.showheadctn1,
.showheadctn2 {
width: 100%;
overflow: hidden;
}
.showheadctn1 {
transform: translateX(50%);
}
.showheadctn2 {
transform: translateX(-100%);
}
.showhead {
font-family: 'proxima-nova';
font-weight: 700;
font-size: 5rem;
letter-spacing: -2.4px;
line-height: 6.2rem;
text-align: center;
color: white;
margin: 0 auto;
border-bottom: 10px solid #e40d0d;
width: 100%;
transform: translateX(50%);
}
.showheadctn1,
.showheadctn2,
.showhead {
animation: revealText 4s infinite;
animation-fill-mode: forwards;
}
#keyframes revealText {
0% {}
100% {
transform: translateX(0%);
}
}
<div class="container-big" id="the-wall">
<div class="chapter-hed">
<h5>PART 1</h5>
<div class="showheadctn1">
<div class="showheadctn2">
<h4 class="showhead">My heading</h4>
</div>
</div>
</div>
</div>
You can make 3 layers.
The bottom of the image you want.
In between the text.
The front again the image, but this time split in half.
And you do the same animation you have now but backwards. (On the third layer, logically)
Sure there is a more appropriate solution, but it is the first thing that has happened to me in my head
I am trying to build the flag of Bosnia and Herzegovina which looks like this.
I am trying to achieve how the stars are lined up. They are laid on a 45deg tilted axis but the stars themselves aren't rotated.
The following is the bare minimum code I am trying but it rotates the stars too.
Is there a way to avoid it?
P.S - I am not allowed to add another element to DOM.
.flag {
position: relative;
width: 300px;
height: 200px;
}
.flag::before {
position: absolute;
content: '★★★★★★★★★';
color: black;
font-size: 3rem;
letter-spacing: 0.33rem;
transform: translateY(-50%) rotate(45deg);
top: 50%;
}
<div class="flag"></div>
Better idea: use text-shadow! Basic CSS:
div {
font-size: 5em;
text-shadow: .5em .5em, 1em 1em, 1.5em 1.5em, 2em 2em, 2.5em 2.5em, 3em 3em, 3.5em 3.5em, 4em 4em;
}
<div>★</div>
Original idea
Kind of ugly, but you could put tabs between the stars, then use a ch-valued font-size and play with tab-size and line-height. Basic idea:
.star {
font: 6.5ch/.5 monospace;
tab-size: .75ch;
}
<pre class='star'>★
★
★
★
★
★
★
★
★</pre>
quick attempt at the actual flag
Note that it only seems to work in Chrome. ☹
.flag {
position: relative;
width: 300px;
height: 200px;
transform: rotate(-45deg);
}
.flag-star:before {
font-size: 3rem;
content:"★";
display: inline-block;
}
.deg-1{
transform: rotate(47deg);
}
.deg-2{
transform: rotate(48deg);
}
.deg-3{
transform: rotate(49deg);
}
.deg-4{
transform: rotate(50deg);
}
.deg-5{
transform: rotate(51deg);
}
.deg-6{
transform: rotate(52deg);
}
.deg-7{
transform: rotate(53deg);
}
<div class="flag">
<div class="flag-star deg-1"></div>
<div class="flag-star deg-2"></div>
<div class="flag-star deg-3"></div>
<div class="flag-star deg-4"></div>
<div class="flag-star deg-5"></div>
<div class="flag-star deg-6"></div>
<div class="flag-star deg-7"></div>
</div>
EDIT: Rotate .flag::before two time first 45deg then 170deg.
.flag {
position: relative;
width: 300px;
height: 200px;
}
.flag::before {
position: absolute;
content: '★★★★★★★★★';
color: black;
font-size: 2rem;
letter-spacing: 0.33rem;
transform: translateY(-50%) rotate(45deg) rotate(170deg);
top: 50%;
}
<div class="flag"></div>
When we use CSS3 transform: operation1(...) operation2(...), which one is done first?
The first operation done seems to be the one the most on the right., i.e. here operation2 is done before operation1. Just to be sure, is it true?
Note: I have read one thing and its contrary in some places (answers, articles on the internet), thus the question here.
Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1.
This MDN article states indeed:
The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
Here is the documentation : http://www.w3.org/TR/css-transforms-1/.
Example 1
Here the scaling is done first, and then the translation of 100px vertically (if translation was done first, the scaling would make the translation of 500px!)
#container {
position: absolute;
transform: translate(0,100px) scale(5);
transform-origin: 0 0; }
<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>
Example 2
Here the translation is done first, and then the scaling (the scaling done after makes that the translation looks like a 500px-translation!)
#container {
position: absolute;
transform: scale(5) translate(0,100px);
transform-origin: 0 0; }
<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>
This has been mentioned in other answers and comments, but not with enough emphasis in my opinion: the short answer is both ways are valid.
It all depends whether you consider your coordinates attached to your element (left to right) or fixed to the page based on the initial element position (right to left).
Here is an article showing the difference with animations (which makes it easier to understand): Chaining transforms.
Here is a snippet showing the animations from the article:
html, body { height: 100%; }
body {
background: #aaa;
color: #000;
font-family: Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif;
overflow: hidden;
margin: 0;
}
.info {
text-align: center;
font-family: Consolas,monaco,monospace;
font-size: 20px;
font-weight: bold;
margin-bottom: 4px;
color: #fff;
}
.split { white-space: nowrap; }
.side {
display: inline-block;
width: 50%;
}
.label {
text-align: center;
font-size: 20px;
}
.container {
position: relative;
font-size: 50px;
margin: .6em auto 0;
width: 0; height: 0;
transform: translateX(-1em);
}
.ltr .object {
position: absolute;
left: 0; top: 0;
width: 1em; height: 1em;
margin: -.5em 0 0 -.5em;
background: rgb(114,34,34);
animation: ltrObj 5s infinite;
}
#keyframes ltrObj {
from, 10% { transform: rotate( 0deg) translateX(0em); }
40% { transform: rotate(45deg) translateX(0em); }
70%, to { transform: rotate(45deg) translateX(2em); }
}
.object.shadow {
animation: none;
opacity: .2;
}
.ltr .axes {
position: absolute;
left: .5em; top: .5em;
width: 1em; height: 1em;
color: #111;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
}
.ltr .axes::before, .ltr .axes::after {
content: '';
position: absolute;
width: .2em; height: .2em;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
transform-origin: top left;
}
.ltr .axes::before { top: 100%; left: 0; margin-left: -1px; margin-top: 1px; transform: rotate(225deg); }
.ltr .axes::after { top: 0; left: 100%; margin-top: -1px; margin-left: 1px; transform: rotate(135deg); }
.rtl .axes {
position: absolute;
left: 0; top: 0;
width: 2.5em; height: 2.3em;
color: #111;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
}
.rtl .axes::before, .rtl .axes::after {
content: '';
position: absolute;
width: .2em; height: .2em;
box-sizing: border-box;
border-left: 2px solid;
border-top: 2px solid;
transform-origin: top left;
}
.rtl .axes::before { top: 100%; left: 0; margin-left: -1px; margin-top: 1px; transform: rotate(225deg); }
.rtl .axes::after { top: 0; left: 100%; margin-top: -1px; margin-left: 1px; transform: rotate(135deg); }
.rtl .object {
position: absolute;
left: 0; top: 0;
width: 1em; height: 1em;
margin: -.5em 0 0 -.5em;
background: rgba(100,0,0,0.8);
animation: rtlObj 5s infinite;
}
#keyframes rtlObj {
from, 10% { transform: rotate( 0deg) translateX(0em); }
40% { transform: rotate( 0deg) translateX(2em); }
70%, to { transform: rotate(45deg) translateX(2em); }
}
.helper-mask {
position: absolute;
left: 0; top: 0;
width: 3em; height: 3em;
overflow: hidden;
}
.helper {
position: absolute;
left: 0; top: -2em;
width: 0; height: 2em;
margin-top: 2px;
box-sizing: border-box;
border: 2px solid #00c;
border-left: none;
border-radius: 0 100% 0 0;
transform-origin: bottom left;
animation: helper 5s infinite;
}
#keyframes helper {
from, 10% { width: 0em; transform: rotate( 0deg); }
40% { width: 2em; transform: rotate( 0deg);}
70%, to { width: 2em; transform: rotate(45deg);}
}
<div class="info">rotate(45deg) translateX(2em)</div>
<div class="split">
<div class="side ltr">
<div class="label">Left to Right</div>
<div class="container">
<div class="object shadow"></div>
<div class="object">
<div class="axes"></div>
</div>
</div>
</div>
<div class="side rtl">
<div class="label">Right to Left</div>
<div class="container">
<div class="axes"></div>
<div class="object"></div>
<div class="helper-mask">
<div class="helper"></div>
</div>
</div>
</div>
</div>
Whether the actual implementation uses left to right or right to left is irrelevant, both are equally valid when creating an animation, as long as you keep the difference in mind.
Transforms are performed left to right. Transforms correspond to matrix operations, and these are performed left to right.
There is intuition behind it, it's not just that this is literally in the spec as a normative rule (point 3 here: https://drafts.csswg.org/css-transforms-1/#transform-rendering)
Here's a pen to try: https://codepen.io/monfera/pen/YLWGrM
Explanation:
Each transform step establishes its own coordinate system. So
transform: translateX(500px);
establishes a new coordinate system 500px along the X axis of its parent, and the element will be rendered there.
Similarly,
background-color: blue;
transform: translateX(500px) rotate(60deg);
first establishes a new coordinate system 500px along the X axis (to the right) of its parent, and only then, within that (translated, but it's now irrelevant) coordinate system does it perform the rotation. So it'll be a shape that's 500px to the right, and rotated in place (around the so-called transform-origin which is interpreted in the local coordinate system, and the default 50% 50% for rotation means, rotation around the center of the rectangle, but it's an aside).
The reverse order
background-color: orange;
transform: rotate(60deg) translateX(500px);
first establishes a new coordinate system that's rotated 60 degrees relative to the parent, and then translates 100px along the X axis of the now rotated coordinate system, in a direction that is not actually to the right from the global viewpoint of the document (or user). So, in this case, it's as if you first rotated the paper, and then slid the shape 500 units along the side of the paper (from the origin, which is in this case the top left corner).
For a more advanced discussion, and understanding of how it's possible to intuitively understand it for both directions, check out Composing Transformations - CSS transforms follow the post-multiplication model, so look for the page with the heading "Think of transformations as transforming the local coordinate frame" (illustrations seem to be a little off though)
It applies the leftmost transformation first.
As you can see in the image above, the first transformation takes a longer distance as compared to the second. The reason is the first example undergoes scale first and then it takes the distance specified by translate based on its new width on the x-axis. Because it is wider now, 50% will cause it to take a longer distance. The measure specified by 50% is calculated by taking half of the width of itself.
the site I cited from
I just created a demo of a 3d room in HTML using CSS transforms. I made a 200x200 DIV for a back wall, leaving it in that position. Then I made a left wall starting in the same size and position, then added
transform: translate3d(-100px,0px,100px) rotateY(90deg).
Then I made a right wall and added
transform: translate3d( 100px,0px,100px) rotateY(90deg).
This created the room correctly. But this is with version 13 of Safari. Originally I tried to list the rotation step first, but the wall was in an odd position. So I'm seeing a right-to-left behavior.