Develop Reference

How to make old text slide down as new text is added above it?

I am feeding text to a div from the top.
The following code gives the newest paragraph a slide-down animation as it is added to the div.
How can I make all paragraphs slide down as the new one is created?
Also, any tips on my code will be greatly appreciated!
HTML:
<div id="text">
Javascript:
function addText(message) {
var el = document.getElementById('text');
var p = document.createElement('p');
p.appendChild(document.createTextNode(message));
el.insertBefore(p, el.childNodes[0] || null);
$(p).addClass("reveal");
}
CSS:
.reveal {
animation: slide-down 1s;
}
#keyframes slide-down {
from {
-moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
to {
opacity: 1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
-moz-animation: linear;
-webkit-animation: linear;
animation: linear;
}
}

Can you try this.
function addText(message) {
$('p').removeClass("reveal");
setTimeout(function(){
var el = document.getElementById('text');
var p = document.createElement('p');
p.appendChild(document.createTextNode(message));
el.insertBefore(p, el.childNodes[0] || null);
$('p').addClass("reveal");
}, 500);
}
addText('Welcome to first paragrap');
Then you call second one in console.

How do you make pictures blink alternatively

I have two pictures that I want them to blink alternatively. I used CSS and javascript to blink individual picture but failed to make the second picture start to show up at the offset of the first picture. Is there any way to control the timing?
tried: first picture used the following and the second one reversed the opacity.
.blinking{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
animation: blink 1s infinite;
}
#-webkit-keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
#-moz-keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}
#keyframes blink{
100%{ opacity:1;}
0%{opacity:0;}
}

Try using animation-delay
.blinking {
animation: blink 1s infinite;
}
.delay {
animation-delay: .5s;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="blinking">image 1</div>
<div class="blinking delay">image 2</div>

Check out the animation delay property. You may be able to time the delay to start when the fist image is mid-blink.
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

CSS hover with mouse in translateXY

Thank you for reading my question
.ab {
position:absolute;left:50%;top:50%
}
.logo_img {
width:100px;
}
.logo_img:hover {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div class="ab"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img" /></div>
Problem is when mouse goes on it, and image moves, then mouse is not on image and sometimes hover does not work!
Is there any way to do animation like this hover but if mouse is not on image... it keeps going?
Is it possible to user jQuery hover and add class on hover? And delete that class after animation ends?

You can create a container div for the image, wich always stays in the same place, and put the image inside this div. Then instead of checking, if the mouse is over the image, you can check if it is over the div.
#container {
border: 1px solid black;
}
.logo_img {
width:100px;
margin-left: calc(50% - 50px);
}
#container:hover .logo_img {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img">
</div>

var duration = 500;
$('img').mouseenter(function() {
$(this).addClass('hvr').delay(duration).queue(function() {
$(this).removeClass('hvr');
$(this).dequeue();
});
});
CODEPEN

If you mean to make animation work without hover then add this animation-iteration-count to infinite.
.logo_img {
-webkit-animation: hvr 5s ease-out;
-ms-animation: hvr 5s ease-out;
animation: hvr 5s ease-out infinite;
}
Updated another answer using jQuery,
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
$(document).ready(function(){
$("img").on("mouseenter",function(){
$(this).addClass("logo_img");
});
$("img").on("mouseleave",function(){
$(this).removeClass("logo_img");
});
});

Jquery CSS animation bug on mobile

I have an animation using JQuery and CSS for sliding divs into view.
This is my javascript code:
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
$(window).scroll(function(event) {
$(".slide-up").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-up");
}
});
});
$(document).ready(function() {
$(".heading-slide-down").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-down");
}
});
});
$(window).scroll(function(event) {
$(".slide-left").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-left");
}
});
});
$(window).scroll(function(event) {
$(".slide-right").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-right");
}
});
});
And this is my CSS
/** FADE IN SLIDING FROM BOTTOM TO TOP **/
.come-up {
transform: translateY(150px);
animation: comeup 0.8s ease forwards;
}
.come-up:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeup {
to { transform: translateY(0); }
}
/** FADE IN SLIDING FROM TOP TO BOTTOM **/
.come-down {
transform: translateY(-100px);
animation: comedown 0.8s ease forwards;
}
.come-down:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comedown {
to { transform: translateY(0); }
}
/** FADE IN SLIDING FROM RIGHT TO LEFT **/
.come-left {
transform: translateX(100px);
animation: comeleft 0.8s ease forwards;
}
.come-left:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeleft {
to { transform: translateX(0); }
}
/** FADE IN SLIDING FROM LEFT TO RIGHT **/
.come-right {
transform: translateX(-100px);
animation: comeright 0.8s ease forwards;
}
.come-right:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeright {
to { transform: translateX(0); }
}
With my divs that need sliding I just apply the classes slide-up or slide-left etc.
Live demo: http://www.shivampaw.com
On my laptop it works fine, however on my phone (iPhone) the divs are already in the correct position and as I scroll towards them I see them transform away and then animate to where they should be.
I'm not sure how else I can explain this, if possible try and take a look for yourself and just scroll down the site slowly and you will see it.
How come this is happening and is there a fix?
Thanks!
Update:
The problem is that on mobile safari on an iPhone SE latest iOS the divs that should be starting positioned downwards so they can slide up into place are starting in the right place and then moving down and sliding backup when they are in view.

I'm experiencing the exact same issue.
The problem seems to be that on mobile devices, .visible() only becomes true some time AFTER the element has entered the screen (rather than EXACTLY when it enters the screen), making the element visible to you already before the animation is played.
I quick-fixed this by giving the elements an opacity of 0 and changing this only when the animation plays.
You would have to add this to your CSS:
.slide-up, .heading-slide-down, .slide-left, .slide-right {
opacity:0;
}
.come-up, .come-down, .come-left, .come-right {
opacity:1;
-webkit-transition: opacity 0.8s ease-in;
-moz-transition: opacity 0.8s ease-in;
-o-transition: opacity 0.8s ease-in;
-ms-transition: opacity 0.8s ease-in;
transition: opacity 0.8s ease-in;
}
.come-up:nth-child(odd), .come-down:nth-child(odd), .come-left:nth-child(odd), .come-right:nth-child(odd) {
opacity:1;
-webkit-transition: opacity 0.6s ease-in;
-moz-transition: opacity 0.6s ease-in;
-o-transition: opacity 0.6s ease-in;
-ms-transition: opacity 0.6s ease-in;
transition: opacity 0.6s ease-in;
}
To make sure these animations aren't played on items that are already in view when the page loads, you could add this to your jQuery:
$(".slide-up, .slide-left, .slide-right").each(function() {
if ($(this).visible(true)) {
$(this).addClass("already-visible");
}
});
And at the bottom of your CSS:
.already-visible {
opacity:1;
transform: translateY(0);
transform: translateX(0);
animation: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}

Div Show Hide With Effect

I have hiding a div with the simple query.
I want add a effect when hiding the div.
here is my code
<script type="text/javascript">
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
dive.style.display = (dive.style.display == "none") ? "block" : "none";
}
<script>

I saw CSS3 in tags, so here is a pure CSS3 example:
.block {
transition: opacity 0.5s linear, transform 0.5s linear;
opacity: 1;
}
.block.hidden {
opacity: 0;
transform: scaleY(0);
}
Here's the fiddle: http://jsfiddle.net/andunai/1e21endf/
However, in this case the element will just disappear visually and won't free the place which it takes, so you'll have to end up with either making this element have position: absolute or animage padding, margin and max-height as well - note that transition of height is still having problems: How can I transition height: 0; to height: auto; using CSS?
.block {
transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear;
opacity: 1;
max-height: 30px; /* This one must be approximately of the
height of element, not less */
}
.block.hidden {
opacity: 0;
max-height: 0;
padding: 0;
transform: scaleY(0);
}
Here's an example of adding almost true scaling: http://jsfiddle.net/andunai/1e21endf/1/

If you want a pure CSS3 solution to fade out and then immediately hide, you can simulate the hiding of the element by setting the max-height to 0. You also need to set overflow:hidden when the element is hidden to ensure the max-height isn't affected by the contents.
When you animate the max-height, you delay it by the fade-out time and set the animation time to 0s to ensure it happens immediately when the fade-out has completed, and vice versa on show:
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
// toggle the class name - this will need to be more inteligent if it has multiple classes
dive.className = dive.className ? '' : 'hidden';
}
#divcustumfld {
transition: opacity 2s linear, max-height 0s linear 0s;
opacity: 1;
background: red;
max-height:100%;
}
#divcustumfld.hidden {
opacity: 0;
transition: opacity 2s linear, max-height 0s linear 2s;
max-height: 0;
overflow:hidden;
}
<button onclick="divcustumfldshow()">Click</button>
<div id="divcustumfld">Foo<br/>Bar</div>
<div>Blah blah</div>

It is not recommended but for idea see output below,you can make an interval and can make opacity alter with each interval. I advice you to use css3 or jquery for effects
var count= 1;
i = setInterval(function(){
divcustumfldshow(count)
if(count==10)
clearInterval(i);
else
count++;
},200);
function divcustumfldshow(count1) {
var dive = document.getElementById("divcustumfld");
if(count1==10)
{dive.style.display = "none";}
else {
console.log(dive.style.opacity)
dive.style.opacity = (10-count1)/10;
}
}
#divcustumfld{width:200px;
height:200px;
background:red;
opacity:1;
}
<div id="divcustumfld">
</div>

demo - http://jsfiddle.net/thjzgv93/
you can use css3 opacity to hide the element
#divcustumfld {
opacity:1;
transition: .5s linear;
}
#divcustumfld.hide {
opacity:0;
}
or you can use translate
demo - http://jsfiddle.net/thjzgv93/1/
#divcustumfld {
transition: .5s linear;
}
#divcustumfld.hide {
transform:translatey(-100%)
}

<div id="divcustumfld">
Your data elements
</div>
Ok
$('#btn1').click(function(){
$('#divcustumfld').hide();
});
http://jsfiddle.net/mynameisvikram/vv0ranzo/