I want to do CSS3 animation like
#keyframes ImageAnimation {
0%
{
width:100%;
opacity:1;
}
100%
{
width:0;
opacity:0;
}
}
.ImageAnimation {
position: absolute;
top: 0;
width: 0;
height: 100%;
right:0;
overflow:hidden;
animation: ImageAnimation 2s forwards;
}
.ImageAnimation img{
width:100%;
height:100%;
}
<div class="ImageAnimation">
<img src="http://www.w3schools.com/css/img_fjords.jpg" />
</div>
I am overlapping this div on another div which contain same image with some changes. I want to reveal below div with CSS3 animation, but I don't want to compress image while transition.
I don't know if this fits your requirements but you just have to overlap your two images (with overlapping divs or background-image) and set your animation on the front-div as you can see in this jsfiddle.
I set the background-image with:
.bg{
height: 400px;
background-image: url(images/the_image.jpg);
background-size: contain;
background-repeat: no-repeat;
}
Related
in this code:
#p1 {
background-image: url(backimgs/first/1.jpg), url(backimgs/first/2.jpg);
background-color: #05080d;
background-position: left top, left bottom;
background-size: 100% 35%, 100% 65%;
}
I want when the page shows up, first show backimgs/first/1.jpg then after 1 sec show backimgs/first/2.jpg. how can I do it?
You can't animate background-images. You can change it, but there won't be any smooth transition:
#p1 {
background-image: url(backimgs/first/1.jpg), url(backimgs/first/2.jpg);
background-color: #05080d;
background-position: left top, left bottom;
background-size: 100% 35%, 100% 65%;
animation: change-bg;
animation-duration: 1s;
}
#keyframes change-bg {
0% {
background-image: url(backimgs/first/1.jpg), url(backimgs/first/2.jpg);
background-size: 100% 35%, 100% 65%;
}
100% {
background-image: url(backimgs/first/2.jpg), url(backimgs/first/1.jpg);
background-size: 100% 65%, 100% 35%;
}
}
If you want a smooth transition - you can use ::before and ::after with a background and animate the opacity of them. Let me know with a comment if you need more info on this aproach, I'll edit the post and show, how it's done.
You mention 'transition' in the title so you will need to control the two parts of the background separately.
To enable this, this snippet removes the backgrounds from the element itself, instead putting them onto two pseudo elements. The before pseudo element having the first image as background and the after pseudo element having the second one.
Separating the components in this way means we can animate the opacities, the first pseudo element going from opacity 0 to opacity 1 in the first second.
Note however that a little hack has been added to ths snippet. As the animation on the before pseudo element is to happen on load then there needs to be some method of waiting for the background image to load before the animation starts else there is a danger it will be part way through, or even finished, before the image is actually available.
I do not know the wider context of how you are testing for load being complete so have just put a delay in here for demo purposes. You'll need to decide what to do to avoid this inital load situation.
* {
margin: 0;
padding: 0;
}
#p1 {
/* added for this demo */
display: inline-block;
width: 100vw;
height: 100vh;
position: relative;
}
#p1::before,
#p1::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
left: 0;
display: inline-block;
background-color: #05080d;
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
animation: fadein 1s linear;
animation-fill-mode: forwards;
opacity: 0;
}
#p1::before {
top: 0;
height: 35%;
background-image: url(https://picsum.photos/id/1018/1024/768);
animation-delay: 1s;
/* a hack to ensure it is loaded before start the animation */
}
#p1::after {
bottom: 0;
height: 65%;
background-image: url(https://picsum.photos/id/1015/1024/768);
animation-delay: 2s;
}
#keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="p1"></div>
I've been trying to get a marquee effect with a fog image to work for several days now. I tried several tutorials (videos and written ones), but the effect keeps visibly skipping/restarting and the effect is not seamless. The image itself is 1000px wide and is loopable. The two fog images are different and move at a different speed to have a better effect.
I did manage to get it to work with text, with the help of another tutorial, but the img version still poses problems. To clarify: The images are displayed, they move properly, but at some point the animation restarts/skips/jumps instead of seamlessly repeating the images.
My current version looks like the following (its a vue project):
.fog-container {
top: 0;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 0;
}
.fog-img {
height: 100%;
position: absolute;
width: 300vw;
}
.fog-img-first {
animation: marquee 120s linear infinite;
background-position: center;
background-repeat: repeat;
background-size: contain;
}
.fog-img-second {
animation: marquee 60s linear infinite;
background-position: center;
background-size: contain;
background-repeat: repeat;
}
#keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-200vw, 0, 0);
}
}
<v-main>
<div class="fog-container">
<div
:style="{'background-image':
`url(${require('./assets/pictures/background/fog_1.png')})`}"
class="fog-img fog-img-first"
/>
<div
:style="{'background-image':
`url(${require('./assets/pictures/background/fog_2.png')})`}"
class="fog-img fog-img-second"
/>
</div>
</v-main>
Could do with some help.
I need to slide a long image horizontally once and then back... I've followed a tutorial here https://css-tricks.com/creating-a-css-sliding-background-effect/ and its all working. My problem is I want the sliding image to be fullscreen (the image height needs to fit the browser viewpoint). Current image is 7676 x 3939. background-size: cover was an option but image is too large so it doesn't fit height-wise. So I'd like half the image (3838px - fullscreen) to show initially then slide to the other half and then back.
Would appreciate some assistance. Below is my code. Thanks.
.wrapper {
overflow: hidden;
}
.sliding-background {
background: url("long-image.jpg") center;
height: 100vh;
width: 7676px;
animation: slide 3s linear 1;
}
#keyframes slide {
0%{
transform: translate3d(0, 0, 0);
}
50%{
transform: translate3d(-3838px, 0, 0);
}
100%{
transform: translate3d(0, 0, 0);
}
}
Try add position relative or absolute to .sliding-background
You could also try animating the background position instead of the element itself. Then you should make your container full screen, like this:
body,
html {
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
}
.sliding-background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/93/Denali_National_Park_Polychrome_Mountains_Wide_17350px.jpg");
background-repeat: repeat-x;
background-size: cover;
height: 100vh;
width: 100vw;
animation: slide 45s linear infinite;
}
#keyframes slide {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
See: https://jsfiddle.net/9mLhdy4c/
This is a followup question to the one I asked yesterday.
My goal was to create a box and slide an SVG graphic through the box, so that as the graphic moved, you would only see the parts of the graphic that were in the box, and the parts outside the box would be hidden. Here's the code that made that work:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br><br>
<div id="mydiv">
<br><br><br>
<a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a>
<br><br><br><br>
</div>
</body>
CSS:
body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;}
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;}
#keyframes mymove{from {left:-100%;} to {left:150%;}}
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}
Basically, all I had to do was add overflow:hidden and position:relative to #mydiv to make it work, which was pointed out. (I get why overflow:hidden is needed, still confused why position:relative is, but oh well.)
This time what I am asking is this: Is there an alternate way to accomplish the same effect using the clip-path css property to define a rectangle that hides any part of the moving graphic that is not within the rectangle? Can clip-path in fact be used somehow to define where the browser is permitted to draw the part parts of the image that are within it, as the image moves around following the keyframes? It seems reasonable to me in theory, but I'm not sure how to begin to implement it that way.
Any thoughts? Using just HTML and CSS, but not JavaScript? That creates a result equal to what this does?
https://jsfiddle.net/91p21odc/
Maybe something like this:
body {
background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed;
background-size: cover;
}
#mydiv {
margin: 50px 0;
padding: 40px 0;
}
#swipe1 {
transition-timing-function: linear;
opacity: .62;
display: inline-block;
position: relative;
animation: mymove 7.85s forwards;
}
.clip {
clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);
}
#keyframes mymove {
from {
left: -100%;
}
to {
left: 150%;
}
}
#mydiv {
text-align: center;
background: black;
opacity: .5;
max-width: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
overflow: hidden;
border: 1px solid black
}
<div id="mydiv">
<div class="clip">
<div id="swipe1">
<img src="https://www.benngrant.com/html5/shape1.svg" />
</div>
</div>
</div>
I'm kind of stuck here trying to figure out how to keep a background image from sagging below it's DIV. I've had to resort to some rather unsavory tactics.
.animation span {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -999;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}
...
<body>
<div id='banner'>
<div class="animation">
<span id="f4"></span>
<span id="f3"></span>
<span id="f2"></span>
<span id="f1"></span>
</div>
<div id="title">
<h1>Silly Webpage Banner</h1>
</div>
</div>
<div id="content" style="background-color:white;">
Content
</div>
</body>
Here is a fiddle
I've had to add height, width, top to the animation class just be able to see the image. If I exclude z-index, the content DIV sinks a layer. I'd really like it to respect background-size and background-position, but I can't figure out why it won't.
Are you going for something more like this? Where the background animation stuff is all contained within a banner div with a set width/height?
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#banner {
position: relative;
display: block;
height: 4rem;
width: 100%;
overflow: hidden;
}
#banner h1 {
position: absolute;
/* Position banner title */
top:1rem;
left:1rem;
padding:0;
margin:0;
}
#main {
position: relative;
}
.animation div {
position: absolute;
width: 100%;
height: 100%;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}
#f1 {
animation-delay: -0s;
background-image: url('https://newevolutiondesigns.com/images/freebies/white-wallpaper-14.jpg');
}
#f2 {
animation-delay: -10s;
background-image: url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/White-Background-Wallpapers-3D-Ball.jpg');
}
#f3 {
animation-delay: -20s;
background-image: url('http://dlc.middcreate.net/wp-content/uploads/2013/09/quality-photo-for-desktop-white-bubbles-widescreen-picture-and-image-background-wallpaper-with-high-resolution.jpg');
}
#f4 {
animation-delay: -30s;
background-image: url('http://hdpic.org/wp-content/uploads/2015/02/Pattern-Black-and-White-Amazing-Background-Cool-Background.jpg');
}
#keyframes fade {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE HTML>
<body>
<div id='banner'>
<div class="animation">
<div id="f4"></div>
<div id="f3"></div>
<div id="f2"></div>
<div id="f1"></div>
</div>
<h1>Silly Webpage Banner</h1>
</div>
<div id="main">
<div id="title">
</div>
<div id="content" style="background-color:white;">
Content
</div>
</div>
</body>
As said in MDN's position reference:
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor
(non-static). If a positioned ancestor doesn't exist, the initial
container is used.
Therefore your background div is out of the flow being placed on a higher layer thus hiding your content elements: that's why you need the z-index rule.
Finally, as your absolute positioned element does not affects or is affected by its parent, you'll have to define explicitly its dimensions.
I'm kinda wondering what you are trying to achieve here though, could try explaining a little?
.animation {
height: any_height;
position: relative;
width: any_width;
}
I think that might help, if it answers the question.