I'm seeing a very strange effect in Google Chrome when I animate the position of an element that contains text.
Without animation, part of the text is hidden by the boundaries of it's parent element. When I animate the left property using #keyframes, part of it gets duplicated repeatedly or stretched. This doesn't seem to happen with Firefox and it doesn't seem to happen with different content such as a CSS pattern.
I can't imagine that I'm the first person to discover this. Is this a known issue? Is there a bug report somewhere that I can read?
Example:
Demo:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
width: 10em;
overflow: hidden;
margin: 1em;
}
.text {
white-space: nowrap;
position: relative;
animation-name: marquee;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes marquee {
from { left: 0; }
to { left: -100%; }
}
<div class="container">
<div class="wrapper">
<div class="text">Now is the time for all good men to come to the aid of their party.</div>
</div>
</div>
A similar issue had occurred to me too. The problem is webkit related.
To resolve this include
body{
-webkit-backface-visibility: hidden;
}
Use this same code if you run into abnormal animation issues that persist on Chrome.
Related
I've tried approaching this situation from multiple angles, but since I seem to be coming up short, I feel like getting a second perspective would help me.
This is probably a VERY simple question, but I for the life of me cannot figure it out, nor find an answer.
In short, I'm making a recreation website (basing it off an old flash site). There's an image that slides down and then gets cut off, and I have no clue how to do the cut off section.
Here is a photo illustrating that I've created a div with a 553x553px radius with an overflow:hidden tag but the image still appears outside the perimeters.
Here is the code for the divs and slide animation (it starts in the middle of the box then is suppose to slide down, cutting off half the image when it's finished):
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 775px;
}
.ctr {
display: absolute;
justify-content: center;
align-items: center;
height: 553px;
width: 553px;
overflow: hidden;
}
#slide {
position: absolute;
bottom: 100px;
width: 552px;
height: 343px;
overflow: hidden;
background-image: url('Intro/3.png');
-webkit-animation: slide 1s forwards;
animation: slide 1s forwards;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#-webkit-keyframes slide {
100% { bottom: 0; }
}
#keyframes slide {
100% { bottom: 0; }
}
I don't feel like these are important to the problem, but since they're in the code, just to cover all my basis, here they are:
.bg {
position: absolute;
width: 795px;
left: 50%
margin-left: -300px;
}
.center {
height: 585px;
position: absolute;
}
And here is the code itself:
<body style="background-color:#421111;">
<div class = "flex">
<img src="bg.png" class="center">
<div class = "ctr">
<p id = "slide"></p>
</div>
<img src="108.png" class="bg">
</div>
(Just for clarity, "bg.png" is the purple inside, 108.png is the frame outline)
This is what I'm trying to achieve, based off the old site.
I know my image isn't far down enough compared to the original site, but I'm trying to fix this issue first. In any case, I'm simply wracking my brain here, since I don't understand how I can create a cutoff. I thought using overflow:hidden; would work, but it doesn't seem to...
Thank you in advance!
It seems that the image you are trying to cut off is outside of the div with the class="ctr".
This should fix your problem:
<body style="background-color:#421111;">
<div class = "flex">
<div class = "ctr">
<img src="bg.png" class="center">
<p id = "slide"></p>
</div>
<img src="108.png" class="bg">
</div>
An alternative would be to use either clip-path or a mask but I really wouldn´t recommend this.
However if you use these (clip-path or mask), make sure to apply it directly to the image itself.
If that also doesn´t work e.g. you don´t have browser support for this, try and do it with an animation or transition. An Example:
<style>
[cut]{
transition: width 1s, height 1s;
width: 600px;
height: 600px;
}
[cut]:hover{
transition: width 1s, height 1s;
width: 553px;
height: 553px;
}
</style>
screenshots of desktop working vs. mobile not working
I have a code snippet to show what I'm trying to do. I have intentionally set a wider width to a heading that is inside a div containing a slideshow. I want the width of the heading to be clipped by the rounded edge of the image. I have something similar working on desktop browsers, but it doesn't render in Safari or Chrome on my iphone. I had set overflow: hidden to the parent div, which did hide the outer parts of the heading like I intended. But I can't get it to render properly on mobile devices. (Note: overflow hidden is hiding everything in the snippet, and I'm not sure what's going on there either).
I have researched similar questions, but those seem to be dealing with overflow issues concerning the body of an entire page.
div {
position: relative;
/* overflow: hidden; */
}
h3 {
margin: 0;
z-index: 4;
width: 300px;
height: 20px;
position: absolute;
/* top: 150px; */
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
text-align: center;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: slideshow 12s linear 0s infinite;
border-radius: 25px;
}
img:nth-child(2) {
z-index: 2;
animation-delay: 4s;
}
img:nth-child(3) {
z-index: 1;
animation-delay: 8s;
}
#keyframes slideshow {
25% {
opacity: 1;
}
33.33% {
opacity: 0;
}
91.66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div>
<h3>Slideshow</h3>
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
</div>
I see it now that you added the images. You have a margin problem there. The h3 element adds margin. If you add 'margin: 0' to your h3 style you will see what happens. One more thing, you need to remove 'top: 150px;'.
And you have to put some working code next time. In the example you added you cannot see anything at least you add a height value to the main div.
I have a container that contains a div inside it. By clicking on that div square, it begins moving and ends up being outside the container.
My problem is that this inner block is being trimmed out really harsh while going beyond the borderline. How could this transition be done more smoothly using CSS means? I want to get an effect when this square disappearing becomes gentle for the eyes.
Maybe I'm supposed to use some kind of an image mask for the main container or a fade effect for the square. I'm not exactly sure how to achieve that behaviour.
Thank you in advance!
Codepan sandbox
.borderline {
position: relative;
text-align: center;
vertical-align: middle;
line-height: 150px;
width: 400px;
height: 150px;
overflow: hidden;
}
.square {
position: absolute;
width: 150px;
height: 150px;
background-color: #0087ff;
}
.square:focus {
transform: translateX(500px);
transition: all 2s;
}
<div class='borderline'>
<div class='square' tabindex="1">Click me</div>
</div>
maybe you could add an animation to your css with opacity like:
.square:focus {
transform: translateX(500px);
transition: all 2s;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
0% {opacity:1}
50% {opacity:1}
100% {opacity:0}
}
https://codepen.io/anon/pen/rzppON
i'm building a website and i got some issues with a text slide animation.
here is the fiddle
And here is the animation part :
.slide {
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
animation-name: slide;
animation-duration: 1s;
}
#-webkit-keyframes slide{
from {
margin-left: 100%;
width: 300%
}
to {
margin-left: 0%;
width: 100%;
}
}
#keyframes slide{
from {
margin-left: 100%;
width: 300%
}
to {
margin-left: 0%;
width: 100%;
}
}
As you can see when the text slides in, the sentence shrinks itself and it doesn't look really smooth. Can someone help me with that ?
I also have a little problem with the blue banner : It looks like it has a margin on the left of like 10px and i can't remove it.
How can i have the banner to take the entire width of the browser ?
This is my first time posting here so if i'm doing something wrong could you tell me please :)
As your div .text has no width assigned, he tries to fit the text inside your div. You can change this by adding a width to your .text:
.text {
width: 100%;
}
Second, the margin you want to avoid is caused by a browser standard for your body tag. You can remove it by adding margin: 0; to it:
body {
margin: 0;
}
You can check your working JS FIDDLE demo. I have added a black background to demonstrate the removed margin.
I though this would be quite easy to understand but i am having trouble getting to grips with it.....
I would like some text on the screen to be animated.
I would like the text to start on the far left within the wrapper, move left until the text has finished displaying and then move right again all within the defined wrapper size (a bit like a bounce effect).
I would like the overflow text to be hidden.
I would like this on a continuous loop.
I would like for this to display in all browsers correctly.
Here is where i have got to:
<style type="text/css">
#wrapper {
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 3s linear infinite;
-webkit-marquee-style: alternate;
}
#keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: -130% }
}
</style>
<div id="wrapper" class="marquee">marquee information marquee information marquee information marquee information</div>
</div>
Any help as ever would be greatly appreciated
Justin.
The code you posted in your question has some typos, I think. There's only one div which has both the wrapper ID and the marquee class.
Following is some code that I think achieves the desired effect. I don't think it'll work using the text-indent as you tried in your question because a percentage in a text-indent doesn't refer to the width of the containing element. I did it using position: relative and a fixed-width marquee element.
Here's a demo: http://codepen.io/Ghodmode/pen/tEDbk
You'll have to add the necessary browser prefixes. The demo relies on prefix-free for that.
HTML:
<div id="wrapper">
<div class="marquee">
<p>Marquee</p>
</div>
</div>
CSS:
#wrapper {
width: 450px;
background-color: #ff0004;
position: relative;
height: 20px;
line-height: 20px;
margin: 1em auto;
overflow: hidden;
}
div.marquee {
position: absolute;
width: 7em;
background-color: #bfb;
text-align: center;
animation-name: marquee;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
p {
margin: 0;
}
#keyframes marquee {
from {
left: 100%;
}
to {
left: -7em;
}
}
For starters, css3 marquee is only supported by webkit browsers at the moment. It would probably be better to use another method for cross-browser comparability such as javascript or jQuery.
Click Here for a great jQuery scroller.
If you still want to use css, here is the syntax for marquee:
-webkit-marquee: [direction] [increment] [repetition] [style] [speed];
You will also want to set overflow-x to -webkit-marquee:
overflow-x: -webkit-marquee;
Here is a version of your code that will work in webkit browsers such as chrome and safari:
<style>
.wrapper{
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee{
white-space:nowrap;
-webkit-marquee: right small infinite alternate fast;
overflow-x: -webkit-marquee;
}
</style>
<div class="wrapper">
<div class="marquee">
marquee information marquee information marquee information marquee information marquee information marquee information marquee information
</div>
</div>