I have a png file of flags that I want to animate moving to the right side, off the screen then back onto the screen from the left side. Is there something in css that works for this specific purpose? or do I have to get creative with the design?
I have used keyframe animation to move the image from left to right so I can understand more about how animation works in css but I am still struggling.
<head>
<link rel="stylesheet" href="Ufatrue.css">
<title>Bashkorostan</title>
</head>
<body bgcolor="#E1E4E6">
<div id="Top">
<img src="Top.png" alt="7 Flags" align="middle">
</div>
<div id="Title">
<h>Volga Federal District News</h>
</div>
#Top {
position: relative;
animation: myanimation;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes myanimation {
0% {left: -300px; top: 0px;}
25% {left: -300px; top: 0px;}
50% {left: 300px; top: 0px;}
75% {right: -300px; top: 0px;}
100% {right: 300px; top: 0px;}
}
You can use just marquee tag for HTML.
.box{
width:10em;
height:10em;
background:dodgerblue;
}
<marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" direction="right" scrollamount="50" scrolldelay="1"><div class="box"></div></maruquee>
I am not sure i understand exactly what you want. But take a look at the snippet below and please comment in the comment section below and tell me if this is what you wanted
.wrapper {
overflow: hidden;
}
#top {
position: relative;
animation: myanimation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
height: 100px;
width: 100px;
background: red;
}
#keyframes myanimation {
0% {
left: 0;
transform: translateX(-100%)
}
100% {
left: 100%;
transform: translateX(100%)
}
}
<div class="wrapper">
<div id="top">
</div>
</div>
What about this?: https://jsfiddle.net/wwWaldi/tadyh6p9/14/
#Top {
width: 30px;
height: 30px;
background: blue;
position: relative;
animation: myanimation;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes myanimation {
0% { right: 0; }
25% { right: -120%; }
85% { visibility: hidden; }
90% {
left: -20%;
visibility: visible;
}
100% {
left: 0;
}
}
Related
I have an image gallery set up. It transitions to the next photo like a slideshow. I am trying to figure out how to get the images to fade as the slideshow is transitioning to the next image. I've tried to add transitions and opacity but can't seem to get it right. Thanks for the help!
body {
padding: 0;
margin: 0;
}
.slider-frame {
padding: 0;
overflow: hidden;
height: 800px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#keyframes slide_animation {
0% {
left: 0px;
}
10% {
left: 0px;
}
20% {
left: 1200px;
}
30% {
left: 1200px;
}
40% {
left: 2400px;
}
50% {
left: 2400px;
}
60% {
left: 1200px;
}
70% {
left: 1200px;
}
80% {
left: 0px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}
.slide-images {
width: auto;
height: auto;
margin: 0 0 0 -2400px;
position: relative;
-webkit-animation-name: slide_animation;
animation-name: slide_animation;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.img-container {
height: 800px;
width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
float: left;
}
img {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 100px;
padding-left: 100px;
}
<div class="slider-frame">
<div class="slide-images">
<div class="img-container">
<img src="../../assets/img/debug.jpg" alt="Angular Carousel 1">
</div>
<div class="img-container">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
</div>
<div class="img-container">
<img src="../../assets/img/face.png" alt="Angular Carousel 1">
</div>
</div>
</div>
To give a fade in effect the below method can be used and you can alter it to your code.
.
fade-in {
animation: fadeIn ease 20s;
-webkit-animation: fadeIn ease 20s;
-moz-animation: fadeIn ease 20s;
-o-animation: fadeIn ease 20s;
-ms-animation: fadeIn ease 20s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
I'm trying to make an animation where a picture moves to left and to the right in a loop.
By using keyframes I've achieved this, but my next step was to transform:scaleX(-1) the image instantly when the image reaches 25% and 50% and so on.. All help is appreciated!
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
<div class="container">
<div class="object"></div>
</div>
I'm not clear about how you want to use transform: scaleX(-1); in your animation, but the principle of what you are looking to achieve is definitely valid.
Essentially, my understanding is that you want to run the animation that moves your element, and at specific intervals immediately apply a transform without it being gracefully animated.
In order to achieve this, add a second animation and run it along-side the first:
animation: move 4s infinite, transformScale 4s infinite;
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
Of course, this will run exactly as the first animation, with the transition between keyframes. The solution is to use:
animation-timing-function: steps(1, end);
Which results in the animation CSS of:
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
Here's a snippet that shows it in action.
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
<div class="container">
<div class="object"></div>
</div>
I did the animation to rotate around a button, I do not know the tags so well, so I'll probably have many errors in my codes: '(
What annoys me today is that it is not rotating in IE11, I tested in Windows 7 and Windows 10, any browser opens normally, until Edge performs as programmed, except IE11,
The URL of the page in question is http://hb1virtual.com.br/Grafica/
Could someone tell me where I'm going wrong?
(there will be many errors, but this one especially, laughs)
HTML
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-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); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
<div class="menu">
<div class="marquee">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
CSS
There are some CSS mistakes in your animation code.
I try to add a new css code segment and try to apply it on your web page to make it work for IE 11.
Code:
<!doctype html>
<head>
<title></title>
<style>
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% {-webkit-transform:rotate(-360deg);-webkit-transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
.clockwise {
-webkit-animation: clockwiseSpin 10s infinite linear;
animation: clockwiseSpin 10s infinite linear;
}
#-webkit-keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}#keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="menu">
<div class="clockwise">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
</body>
</html>
Output in IE 11:
Further, you can try to check the code and try to modify it in your site.
You can refer the example below.
JS Fiddle Example
First, you should change your Title from Portuguese to English.
Second, You can always inject code into your html, blocking IE users from seeing your website, redirecting them to download another browser.
Nobody uses IE anyway... It's not solving the problem, it's avoiding the question, but it's a solution.
Cheers
How do I make the animation switch frames directly? There's has to be no timing-function like linear or whatsoever. I need the frames to switch directly between frames without going through any in between values.
eg:
0% -> top: 20px
100% -> top: 400px
Should directly go to 400px in time t without going through 100, 200, 245 or what ever.
You can use animation delay:
.a{
width: 50%;
height: 100px;
position: absolute;
top: 20px;
background-color: #1F8CCA;
margin-top: 20px;
animation:anim 0s 1;
-webkit-animation:anim 0s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
#-webkit-keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
<div class="a">
<div>
You can define multiple animations with different delays. Not sure it's the best way, but it works.
.a{
width: 50%;
height: 100px;
position: absolute;
top: 20px;
background-color: #1F8CCA;
margin-top: 20px;
animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
-webkit-animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
animation-fill-mode: forwards;
animation-delay:1s, 2s, 3s;
-webkit-animation-delay:1s, 2s, 3s; /* Safari and Chrome */
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
#-webkit-keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
#keyframes anim-back{
from {top: 400px;}
to {top: 20px;}
}
#-webkit-keyframes anim-back{
from {top: 400px;}
to {top: 20px;}
}
<div class="a">
<div>
You can also use step-end as the animation-timing-function. It basically tell CSS to render the element at its initial state until the time runs out, and then immediately render the end state. According to Mozilla's documentation:
The animation stays in its initial state until the end, at which point it jumps directly to its final state. This keyword represents the timing function steps(1, end).
div.box {
position: absolute;
width: 40px;
height: 40px;
top: 40px;
animation-name: changePosition;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#a {
left: 0;
background-color: red;
animation-timing-function: linear;
}
#b {
left: 50px;
background-color: green;
animation-timing-function: step-end;
}
#keyframes changePosition {
0% {
top: 40px;
}
100% {
top: 200px;
}
}
<div id="a" class="box"></div>
<div id="b" class="box"></div>
In that case, you don't need an animation. You can just have 2 css classes and toggle them with JS when needed. Like this...you can modify TIME_TO_WAIT to change the time to what you like.
const item = document.getElementById('target-item');
const TIME_TO_WAIT = 1000; // this is in ms
setTimeout(() => {
item.classList.add('container__item--moved');
}, TIME_TO_WAIT);
.container {
position: relative;
width: 100%;
height: 200px;
background: lightblue;
}
.container__item {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background: red;
}
.container__item--moved {
top: 100px;
}
<div class="container">
<div id="target-item" class="container__item">
</div>
</div>
I'm trying to animate a scrolling text (in a paragraph) so that it will move from the bottom to the top of a div, scroll out of the div (become invisible) and then loop. Here is the relevant css:
#keyframes showAndScroll {
0% {opacity: 0;}
10% {opacity: 0.85;}
50% {opacity: 0.85;}
60% {opacity: 0;}
100% {opacity: 0;}
}
.infobar {
position: absolute;
width: 100%;
height: 30%;
bottom: 0%;
color: white;
background-color: red;
opacity: 0.75;
text-indent: 30px;
font-size: 200%;
pointer-events: none;
animation-name: showAndScroll;
animation-duration: 40s;
animation-iteration-count: infinite;
}
#keyframes scroll {
0% {
transform: translateY(600%); color: red;
}
50% {
transform: translateY(-200%); color: blue;
}
}
.infobar p {
position: absolute;
width: 100%;
overflow: hidden;
display: inline-block;
animation-name: scroll;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
And the html code:
<div class="infobar">
<p>
Infobar test
<p>
</div>
I'm having two issues:
The text overlaps the rest of the document. How can I make the paragraph invisible as it hits the edge of its parent div? This effect is what I'm looking for: http://media02.hongkiat.com/marquee-css3-animation//demo/index2.html
For some reason, placing the paragraph at 100% of the div doesn't seem to put it on the "bottom" of the div (I've currently placed it at 600%). Why is this?
Any input is appreciated. Here is my JSfiddle: https://jsfiddle.net/essi/oqh6ok00/1/
Add overflow: hidden; to class .infobar. In this way the overflow is clipped, and your animated element will be visible within edges similarly to what you have shown us in your link example.
#keyframes showAndScroll {
0% {
opacity: 0;
}
10% {
opacity: 0.85;
}
50% {
opacity: 0.85;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.infobar {
position: absolute;
width: 100%;
height: 30%;
bottom: 0%;
color: white;
background-color: red;
opacity: 0.75;
text-indent: 30px;
font-size: 200%;
pointer-events: none;
animation-name: showAndScroll;
animation-duration: 40s;
animation-iteration-count: infinite;
overflow: hidden;
}
#keyframes scroll {
0% {
transform: translateY(600%);
color: red;
}
50% {
transform: translateY(-200%);
color: blue;
}
}
.infobar p {
position: absolute;
width: 100%;
overflow: hidden;
display: inline-block;
animation-name: scroll;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
<div class="infobar">
<p>
Infobar test
<p>
</div>