We Keep Coding

Loader using css to rotate the outer circle

I need to make the circle arrow rotation for to show as spinner before loading content in my react application.
I have done something like this using transform:rotate like as shown below
#keyframes antiClockwiseSpin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.antiClockwiseSpin {
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: antiClockwiseSpin;
animation-timing-function: linear;
}
.wrapper {
display: flex;
justify-content: space-between;
max-width: 500px;
margin: 0 auto;
}
<div class="wrapper">
<div class="box antiClockwiseSpin">
<img class="image" src="https://i.stack.imgur.com/8s5ds.png" alt="" width="120" height="120">
</div>
</div>
But somehow the whole image is rotating, but what I want is to rotate only the circle. Please find the image of those separately as given if needed.
https://i.stack.imgur.com/hMTmj.png?s=256
https://i.stack.imgur.com/suvmP.png?s=256
I would like to know if we can bring that circle even without image but via plain css

Do it like below:
.box {
width: 120px; /* control the size */
display: inline-grid;
}
.box img {
grid-area: 1/1; /* images above each other */
mix-blend-mode: darken; /* needed to remove the white background */
}
.box img:last-child {
animation: r 2s linear infinite;
transform-origin: 48% 47%;
}
#keyframes r {
to {
transform: rotate(-360deg)
}
}
<div class="box">
<img src="https://i.stack.imgur.com/suvmP.png?s=256">
<img src="https://i.stack.imgur.com/hMTmj.png?s=256">
</div>

you need transparent arrow image
Give position: relative to the parent (person image) and position: absolute to the child element (transparent arrow),Then you can place it to top:0 left:0 for Overlaying.

a tag showing image on hover with transition

I'm trying to display an image on the hover of an a tag which I have got complete and fully working, now I'm facing a problem...
I want the image to 'fade' in and out of the page when it is hovered rather than just appearing in order to give it a more satisfying finish.
My code at the minute is...
a.top-row:hover:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
z-index: 10;
top: -295px;
left: -30px; }
and to display the image I have seperate id's for each of the a tags so it's done like this..
a#a1:hover:after {
content: url(../images/cars/audi/a1.png); }
HTML -
<a class="top-row" id="a1">A1</a>

Like this? (background fixed, animating opacity)
a.top-row {
position: relative;
}
a.top-row:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
top: 100%;
left: 100%;
z-index: 10;
width: 70px;
height: 50px;
opacity: 0;
content: ' ';
pointer-events: none;
}
#a1:after {
background: url(https://placehold.it/70x50);
}
#r8:after {
background: url(https://placehold.it/70x50/ff00ff);
}
a.top-row:hover:after {
opacity: 1;
}
<a class="top-row" id="a1">A1</a><br/>
<a class="top-row" id="r8">R8</a>

Having images fade-in using only CSS would only make it complicated. Instead you can use the jQuery fadeIn() and fadeOut() method to achieve the same.
HTML
<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>
jQuery
$('#showme').hover(
function() {
$('#btn').fadeIn('slow');
},function() {
$('#btn').fadeOut('slow');
});
CSS
div {
width:305px;
height:229px;
}
#btn {
display:none;
}

How do I add a fade to a change image mouseover event?

This is my Javascript function so far :
function changeImg (){
document.getElementById('main').style.backgroundImage = "url('./img/map/maphv.png')"
}
function changeBack () {
document.getElementById('main').style.backgroundImage = "url('./img/map/map.png')"
}
This is in the HTML :
<div id="main">
<a data-title="Africa" href="collection/africa.html" onmouseover="mouseoversound.playclip();changeImg()" onmouseout="changeBack()"><img class="africa" src="./img/map/africa.png" height="50"/> </a>
This is the CSS :
#main {
background-image: url(../img/map/map.png);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 580px;
position: relative;
}
#main img.africa {
top: 244px;
left: 397px;
height: 33.5%;
position: absolute;
width: 18%;
opacity:0;
}
#main img.africa:hover {
top: 244px;
left: 397px;
height: 33.5%;
position: absolute;
width: 18%;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
So the CSS is quite irrelevant but I posted it so that you can see how the top hover is fading in and out. I just wanted to add the fade to the onmouseover event to the background map main element.
So really I just need to add the fade in the Javascript function and add that function to the mouseover event handler?
Any ideas as Javascript is not my first language.. ;)

If you can use jquery,then you can do something like
FIDDLE DEMO
$("#main").on("mouseenter", function () {
$(".africa").stop(true, true).fadeOut(); /***fadeIn or fadeOut***/
});

Ditch the Javascript
If i understand your question correctly, you want to fade between images when you hover over an element, right? This can easily be done in pure CSS.
Give the element you want to animate a background image
Add a child element that's the same size as the parent. This can be an <img>, or a span or div with a background image
Set the opacity for the child element to 0, unless someone hovers over the parent element.
HTML
<div class="fading-bg">
<img src="foo/bar.jpg" alt="stuff">
</div>
CSS
.fading-bg{
position:relative;
width: 100px;
height: 100px;
background: no-repeat center;
background-size: cover;
}
.fading-bg img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
}
.fading-bg:hover img{
opacity: 1;
}
Javascript is awesome, but in my personal opinion you should avoid using it for simple animations like this, as CSS is more than capable of doing it on its own.

CSS/JavaScript slide DIV out and slide DIV in

I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.
My HTML code is like this:
<body>
<div id="content">
<div id="page1">
<!-- Content Area 1 -->
</div>
<div id="page2">
<!-- Content Area 1 -->
</div>
</div>
</body>
Currently I am using
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";
to switch between the pages, but I would like to have the transition as smooth as possible.
Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?

Yes you can do it with pure css by using animation keyframes.
HTML
<div id="content">
<div id="page1" class="page">
<!-- Content Area 1 -->
</div>
<div id="page2" class="page">
<!-- Content Area 1 -->
</div>
</div>
CSS
html,body {
height: 100%;
overflow: hidden;
}
#content {
position: relative;
height: 100%;
}
.page {
position: absolute;
top:0;
height: 100%;
width: 100%;
}
#page1 {
background: #d94e4e;
left:-100%;
-webkit-animation: left-to-right 5s linear forwards;
animation: left-to-right 5s linear forwards;
}
#page2 {
background: #60b044;
left:0;
-webkit-animation: right-to-left 5s linear forwards;
animation: right-to-left 5s linear forwards;
}
#-webkit-keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#-webkit-keyframes right-to-left{
from{left:0}
to{left:100%}
}
#keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#keyframes right-to-left{
from{left:0}
to{left:100%}
}
However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.
Demo jsFiddle
Edited
Now the left one enters and the right one exits at the same time.
UPDATE
The same example using translate3d => jsFiddle

here's an (almost) full CSS solution:
If you can be more specific about what you want I can happily tweak or guide you through the code to help you.
It relies on using translate3d:
transform: translate3d(-200px, 0, 0);
DEMO

using jQuery
http://jsfiddle.net/5EsQk/
<div id="content">
<div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
Content Area 1
</div>
<div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
Content Area 1
</div>
</div>
$(document).ready(function() {
$('#page1').animate({
marginLeft: "+=90"
}, 5000);
$('#page2').animate({
marginRight: "+=90"
}, 5000);
});
edited fiddle => http://jsfiddle.net/5EsQk/1/

Very much possible without jQuery, using only CSS and CSS transitions.
You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.
The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.
This is what the CSS would look like:
#content
{
position: relative;
overflow: hidden;
}
#content #page1
{
position: absolute;
left: 0%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content #page2
{
position: absolute;
left: 100%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content.showPage2 #page1
{
left: -100%;
}
#content.showPage2 #page2
{
left: 0%;
}
And the Javascript could look something like this:
function showPage1()
{
document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
document.getElementById("content").setAttribute("class", "showPage2")
}
I hope this handles it in a way that fits your needs.

Recreating a text animation (source within)

I would like to recreate the text animation seen in this screen video I did of this website theme: http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276
Here is the video to show you the animation:
https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing
I am unsure of where to begin and cannot find anything like it through my search so far, I am open to anything to create this such as jQuery. Thank you for any help!

I'd do this with two absolute positioned texts, one gray (or semi transparent) second one, on top set to overflow:hidden. Then I'd just animate the width of the second container.
How do You like the idea? :)
edit:
little tweaking, but idea the same - fiddle for You: http://jsfiddle.net/Lr4PQ/
quite important CSS rule:
white-space: nowrap;
to prevent breaking lines when width of text node is smaller than text's.
edit 2:
Of course, idea behind lets You to achieve the result using pure CSS, jQuery's role is just animating width.
HTML:
<div class="container">
<div class="text upper">You`re the boss</div>
<div class="text ">You`re the boss</div>
</div>
CSS:
body {
background:#000;
}
.container {
position:absolute;
left:30%;
top:20%;
width:auto;
/*position container as You wish*/
}
.text {
text-transform:uppercase;
font-family:sans-serif;
color:#FFF;
opacity:.2;
white-space: nowrap;
font-size:30px;
}
.text.upper {
position:absolute;
opacity:1;
overflow:hidden;
width:0%;
}
jQuery:
$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);

The animation is achieved in pure CSS3:
jsBin demo
HTML:
<div class="modal">
<h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>
CSS:
.modal h1 {
color: #626161;
font-size: 30px;
left: 50%;
margin-left: -125px;
margin-top: -15px;
position: absolute;
text-align: center;
top: 50%;
}
.modal h1:before {
animation: 5s ease 0s normal none 1 loading;
-o-animation: 5s ease 0s normal none 1 loading;
-ms-animation: 5s ease 0s normal none 1 loading;
-moz-animation: 5s ease 0s normal none 1 loading;
-webkit-animation: 5s ease 0s normal none 1 loading;
color: #E2E2E2;
content: attr(data-content);
max-width: 100%;
overflow: hidden;
position: absolute;
white-space:nowrap;
}
#keyframes loading {
0% { max-width: 0%; }
}
#-o-keyframes loading {
0% { max-width: 0%; }
}
#-ms-keyframes loading {
0% { max-width: 0%; }
}
#-moz-keyframes loading {
0% { max-width: 0%; }
}
#-webkit-keyframes loading {
0% { max-width: 0%; }
}
One of the reason they used a single h1 instead of overlaying two h1 elements and animating the second's one width is simply cause for a better SEO a page should contain only one h1 element. Also using content: attr(data-content); is quite fun so...