hello fellow developers and developers in education.
today i saw this cool effect on this website header
https://www.premiumsmoking.com/nl/e-sigaret/megatwix.html
the smoke effect that keeps looping i thought was very cool so i tried to remake it,
i tried to do this using css animation but the problem i found was when the div with the
background was on like 80% you start to see the black space left to the div.
i want to make it that it looks like its an no ending cicle. (maybe something with fadein?)
this is the code i have now
.element {
width:3000px;
height:1000px;
background-image:url(moveimage1.png);
position:relative;
margin:10px;
z-index: -1;
animation:myfirst 200s infinite;
}
#keyframes myfirst
{
0% {opacity: 0.25; margin-left: -1500px; }
50% {opacity: 1;}
100% {opacity: 0.25; margin-left: 1000px; }
}
i realy hope someone can help me with this "problem"
(if im doing something wrong in this post im sorry ,first time im asking a question on stack overflow)
already thx for reading my question.
--edit--
For everyone that also wants to use this this is my final code :
.element {
width:100%;
height:1000px;
background-image:url(moveimage1.png);
background-size: 3000px 1000px;
float: left;
position:relative;
z-index: -1;
animation:myfirst 10s infinite linear;
}
#keyframes myfirst
{
0% {opacity: 0.25; background-position: 0; }
50% {opacity: 1;}
100% {opacity: 0.25; background-position: 3000px; }
}
Much thanx for loki
You're trying to move the block, not the background inside it. I suggest animating background-position property, not margin-left. You won't have any black space anymore as long as your background image repeats
Related
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 8 months ago.
I want to have a background image fade in from invisible opacity, to 50% opacity, and stay there.
There was a similar question asked here, but I did not follow along at all, seems complicated. Maybe it'll help someone with my similar issue.
I just want to use CSS only if possible, no JS. This is what I have so far in my style.css:
body {
background-image: url("img/me.png");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
}
#keyframes fadeInBG {
0% { opacity: 0.0; }
100% { opacity: 0.5; }
}
You will want to change the image url to something else for your testing. Right now, it's applying the animation to the entire page body (including any text on the page), and not touching the background at all, background is always 100% with no animation. The simple text I have in my html file just says:
<h1> Hello world! </h1>
...which DOES do the animation. How can I direct the animation logic to the background image only? I wish you could designate body.background-image instead of body and it would be solved.
Another thing I noticed is that, once the animation is done, the text "jumps" to 100% opacity, it doesn't stay at 50% like I have it set as above. How to fix that?
Just add the code below in your CSS code.
body {
animation-fill-mode: forwards;
}
Useful link: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Also, I suggest you add a div to achieve it.
.bg-img {
background-image: url("https://media.istockphoto.com/photos/ginger-cat-portrait-picture-id1290233518?b=1&k=20&m=1290233518&s=170667a&w=0&h=C-eVqPpxcxCFqJsykl4rTzq0Kl995ZHCaLB9BgSgEzk=");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
/* add */
animation-fill-mode: forwards;
position: fixed;
inset: 0;
z-index: -1;
}
#keyframes fadeInBG {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
<h1> Hello world! </h1>
<div class="bg-img"></div>
I am new to CSS and HTML as I am learning it in my free time for my livestreaming.
I am attempting to create a custom text animation of the text being cut in half, with the left half floating up and the right half floating down (possibly in future changing to where they both just swing and fall downwards).
I'm not fully sure what to try at this point, I have added, removed, and messed with the code in every way I can think of. I have scoured the internet and this forum and found nothing to help me.
#keyframes slideup {
0% {
top: 50%
}
30% {
top: 50%;
}
90% {
top 40%;
}
100%: {
top: 40%;
}
I expect the left half of the text to float upwards while the right side floats downwards, but that is not happening and I'm assuming its because of my code.
p{
position:absolute;
top:50%;
left:50%;
animation:slideup 1s infinite;
}
#keyframes slideup {
0% {
transform:translateY(0);
}
100%{
transform:translateY(-100px)
}
}
<p>text<p>
this is how u create animation!
I have an image then I have applied the following style rules to:
.spinner {
position: absolute;
width: 600px;
height: 600px;
-webkit-transform-origin: 50% 50%;
-webkit-animation:spin 14s linear infinite;
animation:spin 14s linear infinite;
}
#-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}
In my IDE, this works perfectly fine. I then published a page to the web about 6 months ago. I loaded the page, and it worked as expected. Actually things were good, no problems or anything for all those 6 months. Then a few weeks ago I noticed a strange development -- the rotation behavior changed. I was bewildered because this page, and indeed, the entire site is static. There have been no updates to the master css file or anything for that matter that could possibly interfere with the style rules that I posted above.
Specifically what changed was instead of the image rotating in place at its center, the image now rotates about its original center position. The easiest way to imagine the change in behavior is comparing it to a clock. The center of the clock doesn't move as the hands rotate. However the minute hand and hour hands do (namely the ends of the hands that point to the time). That is what my image is doing now. It's now moving across the x and y dimensions in pixel space when it is not supposed to. It's supposed to rotate in place, staying still. There should be no movement in x or y.
I said to myself, "well this is just impossible," and thought the problem would go away by itself just as mysteriously as it came. Unfortunately it persisted for a few weeks, so I feel compelled to deal with it. Despite the absence of style rule clashes, I added !important to all the style rules that I posted above for the .spinner class as well as the #keyframes out of scope as well. This didn't help.
Now I'm starting to think it could be a browser issue? I'm using google chrome; only google chrome, I didn't include any -moz, I won't need to. My only guess is that the browser updated itself and started handling these animations differently?
Question: Why would animation:spin change spinning behavior? Is this symptomatic of some other looming issue? Is there anything I can do to make my rules more robust, other than add !important?
Chrome version: 64.0.3282.186
Update After what seemed like a billion trial and errors, I found that by setting:
.spinner {
-webkit-transform-origin: 15% 0%;
}
The image started to spin in place like it used to. Still begs the question what happened...
I examined the image to see if it's dimensions had changed somehow, but things look normal.
A bit late at 2021.5 But may be helpful for somebody. In my case it was because I removed :
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
and then caught that. All the followings were untouched ,the css were:
#overlay {
display: none;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 99999;
}
.myblock {
display: inline-block;
vertical-align: center;
horiz-align: center;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
transform-origin: center center;
-moz-transform-origin: center;
width: auto;
height: auto;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
html:
<body>
<div id="overlay">
<div class="myblock" style="background-color: transparent; background-blend-mode: unset">
<img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
alt="this slowpoke moves"/>
</div>
</div>
....//other divs
</div>
</body>
the js part:
function spinIt(gironPrm) {
if (gironPrm === true)
$("#overlay").css('display', 'flex')
else
$("#overlay").css('display', 'none')
}
I have no idea no care of its science and no time to figure out why it happened to me,
but its so as it is
I am trying to create an animation using css the idea is that when hovered the missile falls down(check fiddle link at bottom) rotating so that it will stay almost perpendicular
the problem is that there is no continuity in the animation there are a few pauses i think my problem is here
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}
#-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}
}
http://jsfiddle.net/tuuqhgk3/2/
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
-webkit-animation-timing-function: linear;
}
This should give you a continuous animation speed, rather than the easing (pauses) that is set by default.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
Try updating your anim2 to this:
#-webkit-keyframes anim2 {
0% {margin-left: 280px; transform: rotate(220deg);}
15% {margin-top: 80px;}
100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}
}
To get smooth animation, you need to calculate exact distances (margin-top, margin-left) that need to change in each % step. I don't think you need to add too many steps in this case.
Also, if you want to repeat animation, you can add "-webkit-animation-iteration-count: infinite;" to your hover .fire/.missile (fire won't disappear, for example).
I'm trying to create a graceful transition between the images within my photo gallery without using ":hover" or an once of Javascript. (I'm still open minded to HTML5)
The animation, this slideshow, should begin on page load, no user interaction needed. However my CSS isn't properly timed. Ideally, every 6 seconds, the current image begins to fade out just as the next image begins to fade in. The animation should loop infinitely after the last image.
I'm using a delay between the images in an attempt to stagger the animations, but the images overlap each other far too much. I seem to have misunderstood a number of things. My Css is below:
#imgContainer {
height: 205px;
position: relative;
width: 300px;
}
#imgContainer img {
-moz-animation-duration: 12s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: FadeInOut;
-moz-animation-timing-function: ease-in-out;
left: 0;
position: absolute;
}
#imgContainer img:nth-of-type(1) {
-moz-animation-delay: 0s;
}
#imgContainer img:nth-of-type(2) {
-moz-animation-delay: 6s;
}
#imgContainer img:nth-of-type(3) {
-moz-animation-delay: 12s;
}
#-moz-keyframes FadeInOut {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
I'm really new to css3, so any kind of assistance would be greatly appreciated.
Success!
I discovered if I apply an animation to each of my images within the slideshow, rather than being delayed, I could achieve the effect I desired. Basically the animations would run sequentially in an infinite loop, and rather than use a single keyframe, each has their own.
I wanted the slideshow to progress at 15s intervals. So to accomplish this I set the duration of the entire animation to 45s. The keyframes gradually adjust the opacity of the images based on the current time or frame within the animation. This is indicated by the "%." For example, from 2% to 32% of 45s, the keyframe for the first image will be 100% opaque. Between 32% and 34%, the first image will begin the transition from being opaque to completely transparent.
The difference between (34% of 45s) - (32% of 45s) equals the length of time to complete the transition. Increase this difference for a longer transition.
The keyframe for the second image does the same only its' transition doesn't begin until it reaches 33% of the 45s animation. (I chose to overlap them slightly for visual appeal). Again, I use the difference between 33% and 35% to keep the transition time short, rather than 0% and 35% which would've produced a much longer transition.
The third keyframe follows the same scheme for its image.
As you implement this, don't forget to change / add the appropriate vendor prefix for your browser and browser of your web audience.
/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */
I hope this is helpful to anyone else who may be trying to do the same. If you like what you've read, please feel free to let me know as you vote using the up-arrow.
Thanks.
=)
#imgContainer img{
position:absolute;
left:0;
}
#image0 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
#image1 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
#image2 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}
#-moz-keyframes myKeyFrameName0 {
0% {opacity: 0;}
2% {opacity: 1;}
32% {opacity: 1;}
34% {opacity: 0;}
100% {opacity: 0;}
}
#-moz-keyframes myKeyFrameNamee1 {
0% {opacity: 0;}
33% {opacity: 0;}
35% {opacity: 1;}
65% {opacity: 1;}
67% {opacity: 0;}
100% {opacity: 0;}
}
#-moz-keyframes myKeyFrameName2 {
0% {opacity: 0;}
66% {opacity: 0;}
68% {opacity: 1;}
98% {opacity: 1;}
100% {opacity: 0;}
}