Css marquee like effect is flickering sometimes. The animation is not smooth as we expected. It stuck sometimes. I tried the solution available on diff stackoverflow posts but that did not help me much.
http://codepen.io/anon/pen/vmLGXJ
.marquee {
width: 100%;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
from { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
animation: marquee 15s linear infinite; // you can change the time like 15s to 50s
try to write
from { transform: translate(0, 0); }
to { transform: translate(-100%, 0); } /* Instead of 100% */
Also you can try to use all prefix, -moz- and -webkit-
Related
I made some running text animation animation in CSS same way, as it is in answer here. I tried to implement it like that to avoid any JS manipulation. And everything works fine in Chrome, but text is trembling in Safari.
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out infinite;
}
#keyframes marquee {
0% {
transform: translateX(0);
margin-left: 0;
}
10% {
transform: translateX(0);
margin-left: 0;
}
90% {
transform: translateX(-100%);
margin-left: 100%;
}
100% {
transform: translateX(-100%);
margin-left: 100%;
}
}
<h1 class="marquee">
<span>The only thing that matters now is everything You think of me</span>
</h1>
<p class="marquee">
<span>Beware of short texts!</span>
</p>
I was trying to fix that using only by using CSS, but I still cannot find the solution. Yeah, I can use JS and avoid giving animation to smaller elements. But maybe there is a way to fix this stuff for Safari with CSS only.
My colleague rewritten animation in that way, that it can be handled by Safari. It was obvious to us, that this trembling is caused by using translate + margin, that's why I mentioned it even in title. As you probably know, it is better to avoid margin animations. So, we added wrapper, which have opposite direction animation. Yeah, now we have 2 animations, but they are handled by browsers better, than one with both translation and margin
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee-wrapper {
width: 100%;
animation: marquee-wrapper 4s ease-in-out infinite;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out infinite;
}
#keyframes marquee {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes marquee-wrapper {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
<div class="marquee">
<div class="marquee-wrapper">
<span>
The only thing that matters now is everything You think of me
The only thing that matters now is everything You think of me
</span>
</div>
</div>
<br/>
<div class="marquee">
<div class="marquee-wrapper">
<span>Beware of short texts!</span>
</div>
</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'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;
}
I'm learning to use CSS to make some animations (start from zero). I saw this cool example on a website. I would like to apply this to my own CSS. However I'm thinking several changes to this
1) Can I change this by a timer. So it can flip automatically after a certain period (say flip every 10 seconds) without any mouse movement.
2) I have two <div> in my HTML file that I want to flip from one to anther. Unfortunately they have got the same class (Something like :widget-inner loadable .widget-size-2x1). So can I use #id (ID selector) instead of class selector in CSS file?
3) I saw other examples using an extra JS file to achieve the flipping animation. Ideally can I just use only CSS to do this?
I have a sample code below which only works partly. It doesn't show the first picture. Please guide on how to make the required changes.
#draggable {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#dashboard {
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {transform: rotateY(0deg);}
50% {transform: rotateY(180deg);}
90% {transform: rotateY(180deg);}
100% {transform: rotateY(0deg);}
}
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"/>
</div>
<div class="widget-inner loadable" id="b">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
Based on the information provided in the question and your comments, it seems like the below snippet is what you require. This would keep flipping infinitely without the need for any mouse interactions to trigger the flip action. When the image is shown, the text will get hidden behind and vice-versa.
The changes that I have made are as follows:
Added transform to rotate the div which contains the image (#a) by -180deg on load because this has to initially look as though it is behind the div that contains the text (#b).
When we flip, we have to flip both #a and #b synchronously but in exactly opposing manner. That is, when #a is made to come forward by using rotateY(0deg), the #b has to go behind and hence at that point in time, it should have rotateY(180deg) and vice-versa. This cannot be achieved using a single animation and hence I have added a separate animation keyframe setting for the front and back sides of the flip.
#draggable {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(180deg);
}
90% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateY(-180deg);
}
50% {
-webkit-transform: rotateY(0deg);
}
90% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
90% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateY(-180deg);
}
50% {
transform: rotateY(0deg);
}
90% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-180deg);
}
}
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<img src="http://lorempixel.com/450/281"/>
</div>
<div class="widget-inner loadable" id="b">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
Flip images to flip on some interval using setInterval method. Demo
$(function() {
setInterval(function() {
$('#f1_card').toggleClass("transformStyle transformRotate");
}, 3000)
})
Sure. you can use pseudo class :hover, and css property
transform: rotateY(180deg); for doing flipping you can control timing using animation and keyframes
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }