I'm fairly new to HTML/CSS and I'm currently interested in creating infinite scrolling text within a div in my code, yet for some reason no matter what I do it won't work? I'm unsure of how to approach the issue after hours of searching on stack overflow.
Here is the bit of my code that is struggling:
#interior-right {
display: inline-block;
border: solid orange 2px;
margin-left: 110%;
vertical-align: top;
width: 1300px;
height: 600px;
font-family: 'IBM Plex Mono', monospace;
font-size: 30px;
overflow: hidden;
position: relative;
background: blue;
color: white;
}
.interior-right p {
position: absolute;
width: auto;
height: 100%;
font-size: 150px;
line-height: 170px;
margin: 0;
text-align: center;
white-space: nowrap;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 15s linear infinite;
-webkit-animation: scroll-left 15s linear infinite;
animation: scroll-left 15s linear infinite;
}
#-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
<div id="interior-right">
ALL WORK AND NO PLAY MAKES
</div>
try this... height of the div will increase depends on the content if you give height : auto;. And if you want to set minimum height, give like min-height: 1000px;
#interior-right {
height: auto;
min-height: 1000px;
}
Related
I would like to add an animated message banner to a website. It works as expected on desktop and tablet view, however, when I go to a certain width in mobile view (roughly 570px), It doesn't display the full message. It takes away the last word of the sentence. The display message should say "Your reality is a matter of your perception". The word perception is being removed.
.animated-message-container {
height: 60px;
background-color:#339a9a;
border-top: 1px solid #000;
}/*Makes changes to position of the text within the purple bar underneath the contact form*/
.animated-message-text {
height: 50px;
overflow: hidden;
position: relative;
}
.animated-message-text h3 {
font-size: 27px;
color: #fff;
position: absolute;
font-family: 'DM Sans', sans-serif;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
padding: 0.17%;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 20s linear infinite;
-webkit-animation: example1 20s linear infinite;
animation: example1 20s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="animated-message-container">
<div class="animated-message-text">
<h3>"Your reality is a matter of your perception"</h3>
</div>
<!--<p>Get in touch to discuss session availability.</p>-->
</div>
Does anyone know a way to resolve this issue?
Thanks in advance.
Your h3 text is getting wrapped.
Add css
white-space : nowrap;
to prevent this. In this example, I've added it to the h3's css.
.animated-message-container {
height: 60px;
background-color:#339a9a;
border-top: 1px solid #000;
}/*Makes changes to position of the text within the purple bar underneath the contact form*/
.animated-message-text {
height: 50px;
overflow: hidden;
position: relative;
}
.animated-message-text h3 {
white-space: nowrap;
font-size: 27px;
color: #fff;
position: absolute;
font-family: 'DM Sans', sans-serif;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
padding: 0.17%;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 20s linear infinite;
-webkit-animation: example1 20s linear infinite;
animation: example1 20s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="animated-message-container">
<div class="animated-message-text">
<h3>"Your reality is a matter of your perception"</h3>
</div>
<!--<p>Get in touch to discuss session availability.</p>-->
</div>
how to stop CSS keyframe flip animation on the moon
i have moon illumination in percent i want to display moonlight on moon base on the illumination. moon illumination one to hundred (1-100%) and moonlight should be 1-100% on the moon
for exe when moon illumination is 10% and white color (moon brightness) on the moon should be 10%
here html and css code of moon
.moon {
width: 100px;
height: 100px;
border: 2px solid #ffffff;
border-radius: 50%;
overflow: hidden;
position: relative;
background-color: #fff;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.moon::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #222;
width: 50%;
height: 100%;
-webkit-animation: flip 2s 1s steps(2) infinite alternate;
animation: flip 2s 1s steps(2) infinite alternate;
}
.disc {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.disc::before, .disc::after {
content: " ";
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
border-radius: 50%;
transition: -webkit-transform 4s;
transition: transform 4s;
transition: transform 4s, -webkit-transform 4s;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.disc::before {
background-color: #222;
}
.disc::after {
background-color: #fff;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#-webkit-keyframes flip {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes flip {
0% {
left: 0;
}
100% {
left: 100%;
}
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #222222;
text-align: center;
color: #ffffff;
font-family: 'Fira Mono', monospace;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: .1em;
}
<div class="moon">
<div class="disc"></div>
</div>
I think what you're getting at is that you want the animation to run once and then stop. If so, you should change your animations a bit. Specifically you need to:
Set the animation-fill-mode for .disc to forwards
Set the animation-iteration-count for .disc to 1
Change the rotate keyframes item to only rotate 180 degrees instead of 360.
Here's a codepen showing the complete solution. I deleted some unnecessary animations and removed the non-prefixed CSS for clarity/brevity.
I have a rotate animation that I am symbolizing that something is loading. This works great (except it doesn't rotate continuously, it kind of stops some when it has went around 360 degrees), but on some phones (I have an android note 4) it doesn't spin at all. Then on others (iphones) my circle actually rotates like it is swinging or it is fixed at one corner of the circle and it spins from that axis.
I have webkits in my code and I have the img set to this:
#spinning-circle img {
width: 100%;
height: auto;
}
Why would my image be doing these things. I can give the web url to see this live if you want to see it in a mobile setting.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width:640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 50px;
height: 50px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: blue;
font-size: 1.5em;
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>
You need to use prefixed -webkit-transform in prefixed #webkit-keyframes and not-prefixed transform in not-prefixed #keyframes. And also you need to add prefixed -webkit-animation.
If you want animation doesn't stop at the end, you could use animation-timing-function: linear, but then animation'll have a constant speed.
You don't need to duplicate #keyframes and other properties inside #media screen {}.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
-webkit-animation: spinning-circle linear 2s infinite;
animation: spinning-circle linear 2s infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width: 640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
width: 50px;
height: 50px;
}
#spinning-circle-title {
color: blue;
font-size: 1.5em;
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>
You have to add animation-timing-function: linear; in your animation definition.
Here you have a code working https://jsfiddle.net/xhurpqLd/
-- EDIT --
You also have
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
}
}
You only define the transform for webkit. Change to
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
transform: rotate(360deg) ;
}
}
Here you have the updated code https://jsfiddle.net/xhurpqLd/3/. It works on my Android.
You can also add -ms-transform for IE support.
Lines 731-733 and 1391-1393 of main-style.css appear to be causing the swinging problem.
*::after, *::before {
content: '';
}
should be
*::after, *::before {
content: '';
display: table;
}
assuming you're trying to use this clearfix method
I have been looking to create a similar effect to https://www.google.com/events/io/logistics (the inspiration) however the 4 elements are not rendering correctly, one element jumps over the next. I have tried several iterations of this with no avail. You can see in this Fiddle one side jumps over the next. I have changed the perspective to see this more clearly.
http://jsfiddle.net/368Rc/ (UPDATED:7/11)
<div style="height: 300px;margin-top:40px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="back-pane">back</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
</div>
and CSS
/*************** ANIMATIONS ***************/
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
#-ms-keyframes spin {
from { ms-transform: rotateY(0); }
to { ms-transform: rotateY(360deg); }
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#-webkit-keyframes spin-vertical {
from { -webkit-transform: rotateX(0); }
to { -webkit-transform: rotateX(-360deg); }
}
#-ms-keyframes spin-vertical {
from { ms-transform: rotateX(0); }
to { ms-transform: rotateX(-360deg); }
}
#keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
/*************** STANDARD CUBE ***************/
.cube-wrap {
-webkit-perspective: 1800px;
-webkit-perspective-origin: 0% 1000px;
-moz-perspective: 1800px;
-moz-perspective-origin: 0% 1000px;
-ms-perspective: 1800px;
-ms-perspective-origin: 0% 1000px;
perspective: 1800px;
perspective-origin: 0% 1000px;
}
.cube {
position: relative;
width: 152px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 20s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 20s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 20s infinite linear;
transform-style: preserve-3d;
animation: spin 20s infinite linear;
}
.cube div {
position: absolute;
width: 152px;
height: 202px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
/*************** DEPTH CUBE ***************/
.depth div.back-pane {
background: url("http://doggydish.com/PROJECTS/balloon-green-l.svg");
-webkit-transform: translateZ(10px) rotateY(90deg);
-webkit-transform-origin: 50% 50% 0;
-moz-transform: translateZ(10px) rotateY(90deg);
-moz-transform-origin: 50% 50% 0;
-ms-transform: translateZ(10px) rotateY(90deg);
-ms-transform-origin: 50% 50% 0;
transform: translateZ(10px) rotateY(90deg);
transform-origin: 50% 50% 0;
left:10px;
}
.depth div.right-pane {
-webkit-transform:rotateY(0deg) translateX(0px);
-webkit-transform-origin: 50% 200% 0;
-moz-transform:rotateY(0deg) translateX(0px);
-moz-transform-origin: 50% 200% 0;
-ms-transform:rotateY(0deg) translateX(0px);
-ms-transform-origin: 50% 200% 0;
transform:rotateY(0deg) translateX(0px);
transform-origin: 50% 200% 0;
background: url("http://doggydish.com/PROJECTS/balloon-blue-r.svg");
}
.depth div.left-pane {
-webkit-transform:rotateY(0deg) translateX(0px);
-webkit-transform-origin: 50% 0% 0;
-moz-transform:rotateY(0deg) translateX(0px);
-moz-transform-origin: 50% 0% 0;
-ms-transform:rotateY(0deg) translateX(0px);
-ms-transform-origin: 50% 0% 0;
transform:rotateY(0deg) translateX(0px);
transform-origin: 50% 0% 0;
background: url("http://doggydish.com/PROJECTS/balloon-blue-l.svg");
}
.depth div.front-pane {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
Note: I'm testing on Firefox/Chrome, there may be issues on SAFARI.
Currently chrome doesn't support standard properties of transform.
so you need to use prefix to support all your browsers, even in key-frames.
i have updated one of your key-frames, to show how it works, so fix other keyframes as you want.
DEMO FIDDLE
.balloon-cage2 {
display:block;
position:relative;
left:400px;
}
.balloon-green-r {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr 6s linear infinite;
-moz-animation: rotateyr 6s linear infinite;
animation: rotateyr 6s linear infinite;
margin: 0 auto;
position: absolute;
background-color:#1abc9c;
}
.balloon-green-l {
background: url(http://doggydish.com/PROJECTS/balloon-green-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl 6s linear infinite;
-moz-animation: rotateyl 6s linear infinite;
animation: rotateyl 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-l {
background: url(http://doggydish.com/PROJECTS/balloon-blue-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl2 6s linear infinite;
-moz-animation: rotateyl2 6s linear infinite;
animation: rotateyl2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-r {
background: url(http://doggydish.com/PROJECTS/balloon-blue-r.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr2 6s linear infinite;
-moz-animation: rotateyr2 6s linear infinite;
animation: rotateyr2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
#-webkit-keyframes rotateyr {
0% {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 50% 0% 0;
}
100% {
-webkit-transform: rotateY(360deg);
-webkit-transform-origin: 50% 0% 0;
}
}
#keyframes rotateyr {
0% {
transform: rotateY(0deg);
transform-origin: 50% 0% 0;
}
100% {
transform: rotateY(360deg);
transform-origin: 50% 0% 0;
}
}
#keyframes rotateyr2 {
0% {
transform: rotateY(90deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(450deg);
transform-origin: 50% 0% 0;
}
}
#keyframes rotateyl {
0% {
transform: rotateY(0deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(360deg);
transform-origin: 50% 0 0;
}
}
#keyframes rotateyl2 {
0% {
transform: rotateY(90deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(450deg);
transform-origin: 50% 0 0;
}
}
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;