I am unable to debug on iphones, was hoping someone would be able to point me to the problem.
I got the below code which shows marquee text - scrolling text. Works fine on all platforms except iphones. Any idea what's causing the issue?
On iphones it seems to be empty, but then all of a sudden itll show really fast scrolling text, then nothing again
.marquee {
margin: auto;
margin-top: auto;
padding-bottom: 32px;
margin-top: 55px;
}
.marquee-wrapper {
position: relative;
overflow: hidden;
height: 40px;
display: flex;
justify-content: center;
}
.marquee-words {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
z-index: 1;
}
.marquee-words span {
display: inline-block;
padding-left: 100%;
animation: marquee-keywords 30s linear infinite;
-webkit-animation: marquee-keywords 30s linear infinite;
font-size: 20px;
letter-spacing: 0.2em;
animation-delay: -14s;
-webkit-animation-delay: -14s;
}
.marquee-double span {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#keyframes marquee-keywords {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
#-webkit-keyframes marquee-keywords {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
<div class="marquee">
<div class="marquee-wrapper">
<p class="marquee-words">
<span>One example and in front of the room, One example and in front of the room</span>
</p>
<p class="marquee-words marquee-double">
<span>One example and in front of the room, One example and in front of the room</span>
</p>
</div>
</div>
I did not pin down exactly why IOS might be getting confused, but it may be some combination of flex and animation delays because if all this stripped away the problem disappears.
As you already have two copies of the complete text, this snippet simply puts them altogether in one element and animates that element but moving it just 50% of its width then starting again.
That way the start of the text goes directly into the position of the start of the second copy so the changeover is visually seamless.
.container {
overflow: hidden;
}
.marquee {
margin: 0;
padding-bottom: 32px;
margin-top: 55px;
display: inline-block;
}
.marquee-words {
white-space: nowrap;
animation: marquee-keywords 15s linear infinite;
font-size: 20px;
letter-spacing: 0.2em;
}
#keyframes marquee-keywords {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
<div class="container">
<div class="marquee">
<div class="marquee-words">One example and in front of the room, One example and in front of the room, One example and in front of the room, One example and in front of the room, </div>
</div>
</div>
Note: although the text is styled not to wrap it seems that a trailing space causes a slight mis-alignment of the text (a very slight jerkiness) when it is repeating at 50%. The final trailing space is replaced with a non breaking space in the snippet so that this space does not get ignored.
Related
I was wondering if someone can help me troubleshoot an issue I'm having on a Squarespace site I'm currently building. I'm currently using a Fluid Engine section with a background video and placing some custom code in a container for an animation (See here: https://grapefruit-ellipse-2jhy.squarespace.com - Password: Lovetheone2023).
The problem I'm having is that this works fine in Safari, but just doesn't seem to be working in Chrome. However, when testing the code in isolation on Codepen using Chrome, the animation works as expected, so something about the combination of Squarespace and the code seems to be creating an issue which I can't figure out.
Any help would be greatly appreciated! For reference please see the custom code below
<style>
.animated-alternating-heading .h1 {
position: absolute !important;
display: inline-block !important;
text-align: center;
width: inherit;
animation-name: alternate !important;
animation-duration: 20s !important;
animation-iteration-count: infinite !important;
opacity: 0 !important;
}
.blue {
color: #31C0D2 !important;
}
.magenta {
color: #E2144E !important;
}
.peach {
color: #F39B40 !important;
}
#keyframes alternate {
0% {
opacity: 0;
transform: translateY(30px);
}
8%,
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(-15px);
}
}
.animated-alternating-heading .h1:nth-child(1) {
animation-delay: 0s;
}
.animated-alternating-heading .h1:nth-child(2) {
animation-delay: 5s;
}
.animated-alternating-heading .h1:nth-child(3) {
animation-delay: 10s;
}
.animated-alternating-heading .h1:nth-child(4) {
animation-delay: 15s;
}
</style>
<div class="animated-alternating-heading">
<h1 class="h1">We believe all children have a right to <span class="magenta">survive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="blue">thrive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="peach">flourish</span></h1>
<h1 class="h1">Making a Difference One Child at a Time</h1>
</div>
I'm using the jm spinner plugin on my site, but I want to change the bouncing dots from changing size (bouncing) when they show. They display as a 'bounce' that makes them look like they are growing in size. I just want them to stay the same size, but I've been playing with the .css file and the debugger and I can't figure out to make any changes!
Here is a code pen
On the site it says I can modify/style the spinner like
.spinner {
}
but I'm not sure what to put here.
It seems like I don't want the 'sk-bouncedelay' but not sure
Something like this? If so, you can forget about the plugin.
.spinner>div {
width: 13px;
height: 13px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0;
animation: showhide 1.4s infinite;
}
.spinner .dot1 {
animation-delay: -0.32s;
}
.spinner .dot2 {
animation-delay: -0.16s;
}
#keyframes showhide {
0%,
100% {
opacity: 0;
}
80% {
opacity: 1;
}
}
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have some right to left scrolling text that teleports back to the origin at the end of the animation, while I am more so looking for it to disappear out of and appear into the margin.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
color: white;
line-height: 50px;
animation: example1 10s linear infinite;te
}
#keyframes example1 {
from {
margin-left: 60%;
width: 300%;
}
to {
margin-left: 35%;
width: 100%;
}
}
body {
background-color: black;
}
<div class="example1">
<h3>text</h3>
</div>
If you need your CSS animation to only run once, you have to set the animation-iteration-count property to 1 (in fact, to not set it at all, as 1 is its default value).
You're currently setting it to infinite, using the animation shorthand, which sets multiple animation properties in one single declaration. Just remove infinte from that line. You should also remove the te following that declaration, which is invalid CSS.
To have your animation animate multiple properties, you can add as many animatable properties to your keyframes and they will animate accordingly. In your case, adding a 50% keyframe with opacity:1 and adding opacity:0 to the to keyframe will make your element fade from 1 to 0 starting at half of the animation until its end.
Using animation-timing-function, particularly with timing functions (a.k.a. as easings), allows adding acceleration and deceleration to animations, making them look more "natural", especially when used on movement animations.
Another handy property of CSS animations is the animation-fill-mode. It allows setting the animated properties to the values they have been animated to, when the animation ends (as opposed to being reset to any applying CSS). This avoids the "jump" whenever you have animated a property to a different value that what normally applies to it.
Last note, on performance: to make sure your animations run smoothly on any device, you should only animate properties which do not trigger repaints on subsequent elements. In fact, you should strive to ever animate only 2 properties: transform and opacity. In your case, rather than animating margin-left, which moves your element around and triggers repaint on subsequent elements in DOM, you should never actually move it and use transform to paint it at different positions.
Here's an example (not sure if this is what you asked for, but you can play around with it some more):
body {
overflow-x: hidden;
background-color: #212121;
}
.example1 h3 {
color: white;
font-size: 3rem;
margin: 0;
line-height: 50px;
animation: example1 5s cubic-bezier(.4,0,.2,1) forwards;
}
#keyframes example1 {
from{
transform: translateX(107%);
}
38% {
opacity: 1;
}
42% {
transform: translateX(35%);
}
60% {
opacity: 0;
transform: translateX(35%);
}
62% {
transform: translateX(0);
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="example1">
<h3>text</h3>
</div>
If, on the contrary, you want your animation looping but want to simply create a smooth transition between end and start, the golden rule is in both from and to keyframes the animated properties have to have the same values (because default value of transform:translateX() is 0 and of opacity is 1, I don't need to set them in from - that's the starting point):
body {
overflow-x: hidden;
background-color: #212121;
}
.example1 h3 {
color: white;
text-align:right;
padding-right: 1rem;
font-size: 3rem;
margin: 0;
line-height: 50px;
animation: example1 5s cubic-bezier(.4,0,.2,1) infinite;
}
#keyframes example1 {
38% {
opacity: 1;
}
42% {
transform: translateX(-60%);
}
58% {
opacity: 0;
transform: translateX(-60%);
}
62% {
transform: translateX(0);
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="example1">
<h3>text</h3>
</div>
For more on animation syntax and examples, I recommend MDN, a well curated documentation library, joint effort of Mozilla, Google, Microsoft and many, many others. Arguably, its most useful feature is linking, in the Specifications section, at the bottom, currently applying standards for the respective property or method, so you don't have to waste time tracking them yourself.
You can use more keyframes percentage to control better your animation in stead of using just two keyframes (from/to).
Below a quick example:
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
color: white;
line-height: 50px;
animation: example1 10s linear infinite;te
}
#keyframes example1 {
0% {
margin-left: 60%;
width: 300%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-left: 35%;
width: 100%;
opacity: 0;
}
}
body {
background-color: black;
}
<div class="example1">
<h3>text</h3>
</div>
Instead of animating the margin-left style you should animate the left style, example:
.example1 {
height: 50px;
width: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.example1 h3 {
position: absolute;
top: 0;
left: 100%;
line-height: 50px;
animation: example1 10s linear infinite;
}
#keyframes example1 {
from {
left: 100%;
}
to {
left: -10%;
}
}
<div class="example1">
<h3>text</h3>
</div>
My HTML code is
<div class="container1">
<div id="container-table"></div>
<div id="container-tablec"></div>
<div id="container-tableq"></div>
<div id="container-table"></div>
<div id="container-table"></div>
</div>
Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.
I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.
I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.
Can anyone suggest me how I can achieve this using CSS3.
Any help would be appreciated. Thanks in advance.
This will help you
/* Sets up our marquee, and inner content */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
animation: reduce 20s linear infinite;
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
animation: scroll 20s linear infinite;
}
/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 50px;
height: 100%;
content: "";
display: block;
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
#keyframes reduce {
to {
padding-left: 0;
}
}
#keyframes scroll {
to {
transform: translateX( -100%);
}
}
<div class="marquee">
<span class="marquee__inner">some text .</span>
</div>
Fiddle Example
I am designing an HTML+CSS slider with automatic transition between slides and infinite duration. I have
this slider on different pages with different content (and number of divs), so I need
to write the same code for everything.
<div class="slide-container">
<div class="slide">div 1 goes here!</div>
<div class="slide">div 2 goes here!</div>
<div class="slide">div 3 goes here!</div>
</div>
I have started with this CSS code and tried with different animations, but I don't know how to do this
.slide-container {
-webkit-animation: transition 2s infinite linear;
-moz-animation: transition 2s infinite linear;
-o-animation: transition 2s infinite linear;
}
EDIT: This is the last transition I used to solve my issue:
#-webkit-keyframes animation {
20%,30% {-webkit-transform: translate(100%);}
70%,100% {-webkit-transform: translate(-100%);}
}
I want to get a div in screen for 5-10 seconds and a transition between divs of 2 seconds (in brackets div that must be on screen at these moment, width=100%, height=50px):
(-start-DIV1 5s)--2s-->(DIV2 5s)--2s-->...-->(DIVN 5s)--2s-->(DIV1 5s)-->...
The reason I do slider with CSS is because I'm trying to avoid JavaScript and JQuery functions.
Below where 12s is defined is the total slide time. This divided by the amount of slides (which in this demo is 3) gives us 4s a slide in this example. This is one method where you can toggle slide time. But like the other poster mentioned you'll still have to customize a bit. My method demonstrates a horizontal slide approach with a smooth transition and fast load time. In any case pure CSS3 is what your after.
JS Poodle.
CSS3 power:
body {
padding: 1em;
background: #999
}
.scrollable {
width: 333px;
margin: 0 auto;
padding: 0;
border:10px solid #fff;
background: #000;
position: relative;
overflow: hidden;
text-align: center;
}
img {
max-width: 333px;
margin: 0;
float:left;
}
.items {
width:999px;
-webkit-animation: hscroll 12s infinite;
-moz-animation: hscroll 12s infinite;
-ms-animation: hscroll 12s infinite;
}
#-webkit-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
#-moz-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
#-ms-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
<div class="scrollable">
<div class="items">
<img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
<img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
<img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
</div>
</div>
Here is a quick demo that demonstrates some of the techniques you'll need to use. I've used the same HTML markup you provided. This is not a ready-to-go "copy and paste" solution -- you'll need to take some time to understand the code and apply the concept to your particular use-case.
The technique basically involved lining up all the slides side-by-side, then shift the entire row of them every few seconds. The edges will be cropped so that only one slide is shown at a time.
To start with, you'll need to define the size of your "viewing area", by applying a width and height to the .slide-container element. Then apply overflow: hidden to the container, so that slides which aren't in the "viewing area" aren't shown.
Each slide should fill the "viewing area", so apply a width and height of 100% to each .slide element. You'll also need make them display as inline-block elements, so that they are aligned side-by-side, but still fill their container.
Finally, the hard part: defining the animation. Keyframe animations are percentage-based. Basically, since there are three slides, we want to switch after 33% of the animation has elapsed, again after 66%, and return to the beginning after 100%. We want a smooth "slide", so we'll make the actual transition last 5% in total -- so the first one actually starts at 28% and ends at 33%. The keyframes code looks like this:
#keyframes slide {
/* modify percentages to match how many items you have */
0% { margin-left: 0; } /* initial position */
/* (stays in first position ) */
28.333% { margin-left: 0; } /* start sliding */
33.333% { margin-left: -100%; } /* done sliding */
/* (stays in second position ) */
61.667% { margin-left: -100%; } /* start sliding */
66.667% { margin-left: -200%; } /* done sliding */
/* (stays in third position ) */
95% { margin-left: -200%; } /* start sliding */
100% { margin-left: 0; } /* done sliding - back to initial position */
}
And it can be applied to the first slide like this (adjust transition time as desired):
.slide:first-of-type {
animation: slide 10s ease;
animation-iteration-count: infinite;
}
After you've done this, you'll just need to adjust to your preferences. Experiment with slide durations and transition types. Perhaps change how the animation repeats at the end. You can even use the animation-play-state property to pause the animation when you hover over the "viewing window". I've included a full demo below that includes the hover-to-pause feature. If you're not 100% clear about how it works, try removing the overflow: hidden property from the .slide-container element.
#keyframes slide {
0% { margin-left: 0; }
28.333% { margin-left: 0; }
33.333% { margin-left: -100%; }
61.667% { margin-left: -100%; }
66.667% { margin-left: -200%; }
95% { margin-left: -200%; }
100% { margin-left: 0; }
}
.slide-container {
overflow: hidden; /* try commenting this line out! */
width: 150px;
height: 100px;
border: 1px solid #000000;
}
.slide {
display: inline-block;
width: 100%;
height: 100%;
}
.slide:first-of-type {
animation: slide 10s ease;
animation-iteration-count: infinite;
}
.slide-container:hover .slide:first-of-type {
animation-play-state: paused;
}
<div class="slide-container">
<div class="slide" style="background: #ff0000">div 1 goes here!</div><div class="slide" style="background: #00ff00">div 2 goes here!</div><div class="slide" style="background: #0000ff">div 3 goes here!</div>
</div>
Here is the same demo on jsFiddle.