We Keep Coding

Automatic start Animation CSS3

I have an multipage with slider: I inserted a css3 animation (the famous rocket animation)
I had code:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
-webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>
How Can I start animation automatically when slide changes?

Soo Plan here is to trigger the animation by adding active class to the outerspace div instead of hover, like below
#outerspace.active div.rocket {
-webkit-transform: translate(0px, -5400px);
-moz-transform: translate(0px, -5400px);
-o-transform: translate(0px, -5400px);
-ms-transform: translate(0px, -5400px);
transform: translate(0px, -5400px);
}
and the trigger it through addclass and removeclass in Jquery.Makesure to set time out to allow time for the transition to take place before removing the class.
$("#outerspace").addClass("active");
setTimeout(function() {
$("#outerspace").removeClass("active");
}, 1000);
I wasnt sure what you wanted to do with the rocket exactly but this codepen link shows the rocket being triggered when the slide changes, i have used simple slider as the question doesnt mention exactly what kind of slider are you using,
http://codepen.io/saa93/full/BQNXJd

You should look into CSS3 animations which will work in almost all the modern browsers without the use of javascript or jQuery.
Here's a JSfiddle to start with, and you will need to add into your slider.
A simple example would be like:
/* Add a keyframe with a name, also add */
#keyframes rocket {
from {
transform: translate(0px, 0);
}
to {
transform: translate(0px, -250px);
}
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
/* Use the animation name with additional properties */
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Working snippet:
#outerspace {
position: relative;
height: 400px;
background: #fff;
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
-webkit-animation-name: rocket;
-webkit-animation-duration: 3s;
animation-name: rocket;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div.rocket div {
width: 92px;
height: 215px;
background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
#-webkit-keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
#keyframes rocket {
from {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
to {
-webkit-transform: translate(0px, -250px);
-moz-transform: translate(0px, -250px);
-o-transform: translate(0px, -250px);
-ms-transform: translate(0px, -250px);
transform: translate(0px, -250px);
}
}
<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>

How to mask an image within a given div by CSS?

Basically, I am doing a project which looks like this:
when a mouse moves over an image, the image inside a div will be enlarged through an animation, but only the part of image inside the div should be displayed, and the outer part should be clipped. Is there any way to clip the image, according to the width and height of the div? In my case, it only enlarged when the mouse hovers over it, but it is not clipped.
$('.thumbnail').on('mouseover',
function() {
$(this).find('.thumb_pic').addClass('hover_effect');
}
);
$('.thumbnail').on('mouseout',
function() {
$(this).find('.thumb_pic').removeClass('hover_effect');
}
);
.thumbnail {
display: inline-block;
position: relative;
}
.thumb_pic {
width: 500px;
padding: 5px;
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
.mask {
opacity: 0;
position: absolute;
top: 5px;
left: 5px;
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.mask:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
<img class="thumb_pic" src="/thumb_img/thumb.png" />
<div class="mask"></div>
</div>

.thumbnail{
overflow:hidden;
width: 500px;
height: 500px;
}
you don't need the mask div. but why do you use jquery and not css? use .thumb_pic:hover instead of .hover_effect and remove your javascript.

I think the property you're looking for is "overflow: hidden"

NOTE: This isn't an answer, only a suggestion to make your code a little more efficient
Instead of using JQuery mouseover and mouseout do it with css
Instead of
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
Try
.thumbnail:hover .thumb_pic {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}

On click Javascript transform

I am trying to achieve a flip card effect on the click of a button but I can not quite figure out the Javascript. I actually know nothing about Javascript so I have attempted to find similar solutions and alter them to my needs but with no results. Below is the CSS for how it is now as a :hover style.
You can view it here : http://dangoodeofficial.co.uk/290-2
CSS:
.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg );
-moz-transform: perspective(600px)RotateY( 180deg );
-ms-transform: perspective(600px)RotateY( 180deg );
-webkit-transform: perspective(600px)RotateY( 180deg );
transform: perspective(600px)RotateY( 180deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D:hover > .front {
-o-transform: perspective(600px)RotateY( -180deg );
-moz-transform: perspective(600px)RotateY( -180deg );
-ms-transform: perspective(600px)RotateY( -180deg );
-webkit-transform: perspective(600px)RotateY( -180deg );
transform: perspective(600px)RotateY( -180deg );
}
.flip3D:hover > .back {
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
}
And I have buttons with classes .flip-button for the front and .flip-back for the back.
Any advice would be greatly appreciated. Thank you.
Dan

I found this plugin. It may helps you. And here there is a list of plugin that do flip effect: http://www.sitepoint.com/10-jquery-flip-effect-plugins/
Edited
This may helps you! I only toggle the class .flip in .front and .back . (http://jsfiddle.net/0x13mL26/3/)
Sorry for the misunderstanding! :)

I know you asked for javascript, but my solution is with JQuery. Use a click function on each button and then you can use Jquery's .removeClass and .addClass methods to change the class of the card that needs to be flipped when the button is being clicked. Something like this should work:
$( "#frontbutton" ).click(function() {
$("#flipcard").addClass('back');
$("#flipcard").removeClass('front');
$("#frontbutton").css("display","none");
$("#backbutton").css("display","static");
});
$( "#backbutton2" ).click(function() {
$("#flipcard").addClass('front');
$("#flipcard").removeClass('back');
$("#backbutton").css("display","none");
$("#frontbutton").css("display","static");
});
and of course you will want to hide the "backbutton" initially.
So when you click the front button, it will change the class of the "flipcard" you have making it flip. The "frontbutton" will then hide, and in its place you put the now visible "backbutton". When the back button is clicked, it should trigger the same process but opposite.

Keep jquery .addClass active after click, my div just reverts if i dont hold down mouse

I have an animation that expands a tiled div tag when you click the div, however I can't seem to get the active class to hold after the click, I have to hold down the mouse button or it will revert to its previous size, im not sure why.
I didn't create a jfiddle because its to hard to get everything to work right with out my custom stuff
http://snomada.com/angular_test/
is a live example.
My friend helped me out with a jsfiddle and it works but when i replicated with my code it doesnt work
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
solved
body{
background: url(../images/banner.jpg);
background-size: 2000px 2000px;
background-repeat: no-repeat;
}
#content{
top:55px;
position:absolute;
margin:0px;
left:7%;
}
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
}
/*.tile-container:active,
.tile-container .test {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}
/*.tile-container:active > .tile,
.tile-container .test > .tile {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
*/
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
background-color: #0000FF;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
}
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
width:450px;
height:350px;
}
.tile-container.beenclicked > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
.tile{
background:inherit;
width:inherit;
height:inherit;
float:left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding:10px;
color:#fff;
}
.circular {
width: 50px;
height: 50px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
border:10px;
border-color:#fff;
}
/*
.active-tile > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
*/
<html>
<head>
<title>Relic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
$( document ).ready(function() {
$(".tile-container").click(function(){
$(this).toggleClass("beenclicked");
});
});
</script>
</head>
<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Relic</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="content">
<div class="tile-container" ng-repeat="userpost in post.userPost" >
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="location">{{userpost.title}}</span>
</div>
</div>
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="temperature">{{userpost.message}}</span>
</div>
</div>
</div>
</div>
</body>
</html>

You need to stop using the "active" pseudo class similar to what #AmuletxHeart is saying. Remove the .tile-container:active selector from your CSS and change the classname that you're adding on click to something other than "active" to remove confusion. I've created a jsfiddle that shows what you want:
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
$('.tile-container').on('click', function() {
$(this).toggleClass('beenclicked');
});
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}

Almost there.
In your css, you are only defining the :active pseudo-class.
Try out:
.tile-container:active,
.tile-container.active {}
.tile-container:active > .tile,
.tile-container.active > .tile {}
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes for more info on pseudo-classes.

I think I see the problem. Use Google Chrome, inspect element to debug your website. Press F12, click on the magnifying glass icon, then select the element you want to debug.
Basics of jQuery, check if DOM is fully loaded before running any scripts.
$( document ).ready(function() {
$(".tile").click(function(){
$(this).addClass("active");
});
});
The "active" css state is triggered when your mouse is held down. Depressing the button removes the "active" state from an element.
What you want to do is use the ".active" class instead:
Original
.tile-container :active {...}
Corrected
.tile-container .active {...}
When clicking on the square tiles, you are actually click the element with class "tile". I found that out by using the magnifying glass thing.
Also, I think you are confused between "tile-container" and "title-container". Notice the additional "t".
You need to change the jQuery to add the active class to the element with class "tile"
Original
$(".title-container").click(function(){
$(this).addClass("active");
});
Corrected
$(".tile").click(function(){
$(this).addClass("active");
});

Rotate back div after the second click on it

I used CSS and Javascript in order to rotate a div after a click on it (from 0deg to 45deg). It's working good. I want the div to rotate back after a second click on it (from 45deg to 0deg), but nothing happens on the div... I didn't find more topics to fix this problem.
If you have any idea, it would be great ! Thanks.
Style
.home {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.home.active {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
Script
$(document).ready(function(){
$('.home').click(function(){
$('.home').removeClass('active');
$(this).addClass('active');
});
});

Try using toggleClass
$(document).ready(function(){
$('.home').click(function(){
$(this).toggleClass('active');
});
});

CSS3 can accomplish the transformation, See Firefox MDN Link for more info
HTML
<div class="description-wrapper">
<div class="category-desc-toggle rotate redbg"></div>
<div class="category-desc">REEED!</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle bluebg rotate"></div>
<div class="category-desc">Blue</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle yellowbg rotate"></div>
<div class="category-desc">Yellow Box</div>
</div>
Javascript
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
CSS
.description-wrapper {
width: 80px;
text-align: center;
margin-bottom: 20px;
}
.redbg {
background-color: red;
}
.bluebg {
background-color: blue;
}
.yellowbg {
background-color: yellow;
}
.rotate {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
width: 80px;
height: 75px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Working Demo