Develop Reference

Background position does not animate in full screen

Here is my CSS:
div.movement {
background-image: url('image.png');
background-repeat: repeat;
background-size: contain;
animation: 60s linear 0s infinite alternate moving-background;
}
#keyframes moving-background {
to {
background-position: 2000% 0%;
}
}
The background moves constantly when I load the webpage in regular mode. However, it stops moving as soon as I go fullscreen by pressing F11. I have tried both Chrome and Firefox and both behave in the same way.
Is there any way to animate a background image's position in full-screen mode? I would prefer a CSS-based solution but I am open to using JavaScript as well.

CSS Zoom effect on load - hide DIV/Image loading latency

I have a web site with a lot of images, I already have lazy-loading but I wish to add some
effects when the images loads
I was looking to reproduce the "zoom" effect when the image is "loading", something like here:
https://masonry.desandro.com/
Please, have a look at this one:
https://tympanus.net/Development/GridLoadingEffects/index8.html
You will notice that there is no effect when the image are already loaded.
I try to hide the 'load latency' when loading an image from the server.
Maybe the animation is not the right trick!
The goal is to have the load softer, now it loads like any image, but the effect is not very nice.
(you can check www.socloze.com for review).
Do you think we can do this in pure CSS (without JS)?

You can add initial animation:
.img-anim {
width: 100px;
height: 100px;
background-image: url('https://lh3.googleusercontent.com/proxy/Dv3m6UV5rC0KL0or-iOT-6i1I4i4I3CXNh-XU0WZ5-yG_vbYme6A8NhIasiwLon0td1DGbVFBDOEwi3LK7gegowFkjQEiJpPBg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
animation-name: scale-in;
animation-duration: .4s;
}
#keyframes scale-in {
0% {
background-size: 0%;
}
100% {
background-size: 100%;
}
}
<div class="img-anim"></div>

You can create initial animation usings css but thats as far as u go, if you need things to pop up as you scroll down then check AOS

How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)

You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.

I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

How to make a background image change on timer

I have a simple full screen background image as shown below:
body {
/* The background image used */
background-image: url("../images/bg-one.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Hide scroll */
overflow-x: hidden;
overflow-y: hidden;
/* Center and scale the background image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I would like to know how I can make the background image change every 5 seconds with a fade in/out transition. Sorry if this seems like a newbie question but I'm just starting out learning Js/Jquery.
My second question would be is it possible to do this using pure CSS3 or would js/jquery work better?
Many thanks,
Aidan

You can't make fade-in fade-out animation on background-image, because this atribute cannot be animated. Instead of it, you can make 2 fixed elements which are positioned over each other.
You can't make timeout/interval in plain CSS, you'll have to use JS. I've used setInterval function which is switching .active state of two elements, class .active adds to element opacity with transition - example is here: https://jsfiddle.net/2cxmeq7p/

I have created a test case for you using jquery:
https://codebrace.com/editor/afec3e661
With pure js you may replace jquery with
document.body.style.backgroundImage = "url('" + a[i++] + "')";
Test case for background change with fadein/out effect:
https://codebrace.com/editor/afef034d6

How to Progressively highlight a chunk of text using jquery/js/css

The effect can be seen live at Webdesignerdepot.com . When you hover over the title of a post the title highlights progressively also when you remove the cursor from the title before the animation is complete the highlight rolls back to its original state.
I tried animating the background color, but the problem that I faced was background color extended the whole div even when text didn't completely filled the div.
I have been thinking of adding an extra div with a z-index less than that of the text and then animating its width, but it would fail since text can extend more than one line. If the resulting effect is to be achieved with the same process it will result in multiple divs making the program really complex.
I couldn't think of any other way of achieving this.
Any other workarounds/techniques I can use?

Use javascript console or firebug or something like that and it's really easy to get a website styles.
CSS
a {
background-size: 200.22% auto;
-webkit-background-size: 200.22% auto;
-moz-background-size: 200.22% auto;
background-position: -0% 0;
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
}
a:hover {
background-position: -99.99% 0;
}
HTML
<a>something</a>