Develop Reference

how do you rotate an image at a 40degree angle from left to right?

I am trying with jQuery or js to get an image rotate left to right constantly after upload (no button).

Try this hope it will be helpful.
const img = document.getElementsByTagName("img")[0]
img.addEventListener("load", function(){
img.classList.remove('rotateRight');
img.classList.add('rotateLeft');
});
img{
heigth :200px;
width : 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ;
}
.rotateRight{
transform: rotate(-40deg);
}
.rotateLeft{
transform: rotate(40deg);
}
<div>
<img class ="rotateRight" src='https://www.w3schools.com/w3css/img_fjords.jpg'/>
</div>

Animation inside Block in hidden state

Does animation work if the block content is in state "none"?
For example, if I want to use Load with JQuery, and I want animation to start after the page load, will this work?
.container {
display : none;
}
.container .animate {
transform : translate(0,-100px);
transition : 1s transform ;
}
.show {
display : block ;
}
in jquery
$(function() {
$(".container").addClass("show");
});
If there is another way please help me.

Looks like display:none elements can be animated...
Here's a test : the text is hidden, translates to the right, then shows up : it works.
$("p").addClass("shift");
setTimeout( function(){
$("p").css("display","block");
}, 1000)
p{
display:none;
border:green solid 1px;
width:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p.shift{
transform : translate(300px,0);
-webkit-transform: translate(300px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text</p>
Is this what you want?

Just try to change the attr
$(function() {
$(".container").attr("display","block !important");
});

Fade two images with different delay

I'm trying to fade 2 different images on the same page with a different delay. The first image appears and then the second one appears.
Here's my fiddle :http://jsfiddle.net/jarod51/4RvWY/3/
the css:
.panel img {
opacity:0;
-moz-transition: opacity 3000ms ease-in-out;
-webkit-transition: opacity 3000ms ease-in-out;
transition: opacity 3000ms ease-in-out;
}
.shown img{
opacity: 1;
}
.img2{
opacity:0;
-moz-transition: opacity 10000ms ease-in-out;
-webkit-transition: opacity 10000ms ease-in-out;
transition: opacity 10000ms ease-in-out;
}
.shown1 img2{
opacity: 1;
}
the html :
<div id="home" class="panel">
<h2>Home</h2>
<img src="http://lorempixum.com/200/200/people/3"/>
<img class="img2" src="http://lorempixum.com/200/200/people/1"/>
</div>
my jquery attempt:
$('#wrap').find('.shown').removeClass('shown');
$target.addClass('shown');
$('#wrap').find('.shown1').removeClass('shown1');
$target.addClass('shown1');

There's a couple of things you may fix to get it working:
1) You're missing a dot (.) before the img2 in the .shown1 img2 rule. You're referring to a class and not to an HTML tag. That must be like this:
.shown1 .img2{
opacity: 1;
}
2) If you want to apply a delay to the CSS transition, you can specify it after the duration in the shorthand transition property, or in the transition-delay property. For example, for a 2s delay you can use:
.panel .img2{
opacity:0;
-moz-transition: opacity 10000ms 2s ease-in-out;
-webkit-transition: opacity 10000ms 2s ease-in-out;
transition: opacity 10000ms 2s ease-in-out;
}
See it in action here: http://jsfiddle.net/FL3RK/2/
Anyway, IMHO it would be nicer if you use the same duration (3000ms or 3s) for both transitions.
EDIT: If you don't want to wait for the animation to be completed to start it over again, put the transition property in your .shown1 .img2 rule like this:
.shown1 .img2{
opacity: 1;
-moz-transition: opacity 3000ms 2s ease-in-out;
-webkit-transition: opacity 3000ms 2s ease-in-out;
transition: opacity 3000ms 2s ease-in-out;
}
Working fiddle: http://jsfiddle.net/FL3RK/3/

var finished = 0;
var callback = function (){
// Do whatever you want.
finished++;
}
$(".div"+finished).animate(params, duration, null, callback);

html
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/1"/>
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/4"/>
css
img {display:none;}
script
$("img").each(function(i) {
$(this).fadeIn(2000*(i+1));
});
see the fiddle http://jsfiddle.net/vishnurajv/px7U5/

jQuery toggleClass - can't animate or give it a transition

I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}

visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.

instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();

Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}

As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.

AngularJS Fade changed content by ng-bind-html

Is it possible to fade the content of element that ng-bind-html fills in. Already tried to use the id.ng-enter or id.ng-leave without success.

ng-if will add/remove DOM element dynamically according to the boolean value of expression. ng-animation could attach to the element which has ng-if directive that change the DOM.
This element will be added when htmlContent is being filled in.
<body ng-controller="myCtrl">
<button ng-click="fillinContent()">fillin</button>
<div ng-if="htmlContent" class="toggle" ng-bind-html="htmlContent"></div>
</body>
Decalre the CSS3 transition
<style>
.toggle{
-webkit-transition: linear 1s;
-moz-transition: linear 1s;
-ms-transition: linear 1s;
-o-transition: linear 1s;
transition: linear 1s;
}
.toggle.ng-enter{
opacity: 0;
}
.toggle.ng-enter-active{
opacity: 1;
}
.toggle.ng-leave{
opacity: 1;
}
.toggle.ng-leave-active{
opacity: 0;
}
</style>
Controller
angular.module("myApp",['ngSanitize','ngAnimate'])
.controller("myCtrl",function($scope){
$scope.fillinContent = function(){
$scope.htmlContent = "content content";
}
});
The html content will fade in when you click the fill in button: