We Keep Coding

I need multiline type writing effect with multiple loops i.e. after finishing the all lines, start again in CSS

I used "animation-iteration-count: infinite" but it needs to be used of every line separately. I need it to be applied on all lines combined. My code uses separate CSS class for every line which is quite annoying. I need one single class to be applied on whole text no matter how many line or paragraphs there are. Below is my code.
.css-typing p {
font-family: "Courier";
font-size: 14px;
width: 200em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 2s steps(40, end);
animation: type 4s steps(40, end);
animation-iteration-count: infinite;
}
.css-typing p:nth-child(2) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 2s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 5s steps(40, end);
animation: type3 4s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 10s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes type {
from {
width: 0;
}
}
#-webkit-keyframes type {
from {
width: 0;
}
}
span {
animation: blink 1s infinite;
}
#keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="css-typing">
<p>
Typed <br> text 1
</p>
<p>
Typed text 2
</p>
<p>
Typed text 3
</p>
</div>

I think CSS animation is not the way to go.
If possible, you can actually write the characters to the browser from JS.
From the top of my head you should have:
Text in JS array. each element represents a line.
setInterval that calls a function that pops each time a line
another setInterval or setTimeout that will put each letter there, using substr and keep an index where you are at any given time.
If you don't want to code, google for codepen typing effect, I'm sure you will find something you will like.

CSS animation to occur on a timer to create a heartbeat animation

The snippet below shows a spinning circle. Every 1 second I want this circle to double in size and then shrink back to it's original size(to look like a heartbeat). The way I am attempting to do this is by creating a timer in javascript so that every one second, the class which causes the grow effect is removed from the circle, and then immediately added back on. I was hoping that having the class added back on after being removed would trigger the animation but I guess not. Right now the "heartbeat" only happens once.
Also I would like to have the circle spinning at constant speed if that's possible. Right now the circle really slows down at the end, and starts a little bit slow.
// set timeout
let tid = setTimeout(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
tid = setTimeout(mycode, 1000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
clearTimeout(tid);
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 10s;
animation-iteration-count: infinite;
width: 40px;
height: 40px;
}
.heartbeat {
width: 100%;
height: 100%;
animation-name: heartbeat;
animation-duration: 0.15s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: both;
}
#inner-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes heartbeat {
100% {
transform: scale(2,2);
-webkit-transform: scale(2,2);
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>

use setInterval() and clearInterval() instead of setTimeout(), and remove the setTimeout() inside the function mycode()
// set timeout
let tid = setInterval(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
and for the animation speed add animation-timing-function: linear; to .heartbeat {} and #spinning-circle {}

You don't need javascript at all:
#spinning-circle {
margin-top: 40px;
margin-left: 40px;
animation: spinning-circle linear 10s infinite;
width: 40px;
height: 40px;
overflow: visible;
}
#inner-circle {
animation: heartbeat 1s infinite;
}
#inner-circle img {
width: 100%;
height: auto;
}
#keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(2);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>

How to make the animation on a website where a piece of text changes every seconds?

It's like the animation they have on npm front page and also on the brown hackathon page. Where a piece of text erases and appears every few seconds with different content. I think There may be an existing template for it online, but what do they call it?

This is basic idea how to create this kind of animation check following snippet:
If you want to expend this animation just add letters in array.
$(function() {
var arr = ['t','te','tex','text','G','Go','Goo','Goog','Googl','Googl','Google'];
var elem = $('#ani');
var i = 0;
var loop = function(){
elem.text(arr[i++]);
if(i>arr.length) {
//clearInterval(intervalID);
i=0;
}
}
var intervalID = setInterval(loop, 500);
})
.test{
font-size:26px;
color:green;
}
.ani{
color:red;
}
.ani::after{
content:"|";
-webkit-animation: cursor-blink 0.8s linear infinite;
-moz-animation: cursor-blink 0.8s linear infinite;
-o-animation: cursor-blink 0.8s linear infinite;
animation: cursor-blink 0.8s linear infinite;
}
#-moz-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-o-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="test">
This is text
<span class="ani" id="ani">
Google
</span>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

CSS animate Javascript

I am trying to install some Javacript to make my animation run more than once.
I have been given this script off the animate site but have no idea where to actually include the element that I want it to apply the animation to.
I wish to apply the animation 'animated zoomIn' to both the h2 and h3 headings that are in a div with the class of thumbtitle-box.
Here is my html:
div class="imagethumbnailleft">
<div class="thumbtitle-box"><h2>ARTFUL DODGER TRADING COMPANY</h2><h3>- Illustrated playing card series -</h3></div>
Here is my CSS:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
And the Javascript - which is what the problem is:
$(document).ready(function() {
function animationHover(trigger, element, animation){
element = $(element);
trigger = $(trigger);
trigger.hover(
function() {
element.addClass('animated ' + 'zoomIn');
},
function(){
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
});
I am completely new to Javascript and any help would be much appreciated.

May be you are looking for this:
work for h2 and h3 tag under thumbtitle-box class
$(".imagethumbnailleft h2, .imagethumbnailleft h3").hover(function(){
animationHover(this,this,'zoomIn');
});
http://jsfiddle.net/a7r95y7x/2/

image rotate 360 degree on click

Need your help developers,
I am using images as a menu. I just want when i click on image it rotate 360 degree and then another page is open.
i try this.
<style>
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:active {
-webkit-transform: rotate(360deg);
}
</style>
html:
<img class="image" src="img path">
in this code image rotation is depend on click time and i want user just click once image rotate 360 degree and the link page display.
but this is not i want.
I am using jqueryMobile and phonegap
thanks in advance.

You can put the link url in the image as a data attribute:
<img id="theimage" data-linkurl="#page2"src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" />
Then when you handle the click event,
You add the animation class.
You add an animationEnd handler that fires when the animation is complete. Use one() instead of on() as you only want this handler to fire once.
In the animationEnd handler you remove the animation class (so you can add it again next time), get the url from the data-attribute, and then navigate to the page.
$("#theimage").on("click", function(){
$(this).addClass("imageRot").one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {
$(this).removeClass("imageRot"); //remove anim class
var url = $(this).data('linkurl'); //get url from data-attribute
$( ":mobile-pagecontainer" ).pagecontainer( "change", url); //navigate to page
});
});
For the animation class I have used #cracker's spin animation (thanks cracker!):
.imageRot {
-webkit-animation:spin 2s ease-in-out;
-moz-animation:spin 2s ease-in-out;
animation:spin 2s ease-in-out;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
Here is a working DEMO

you need to try using
.image {
-webkit-animation:spin 4s ease-in-out; // No more infinite
-moz-animation:spin 4s linear;
animation:spin 4s linear;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
OR
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
.rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
DEMO1
DEMO2

try it:
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image:active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
You didn't include a webkit option (-webkit-*) in transition.
You didn't include a non-webkit option in transform.
because of that, no matter what browser you were using, something were missing (transform or transition), and therefore the code didn't work on any browser.
edit: I noticed it wasn't what you were asking for. I don't believe that it can be done with CSS only. If you want, you can do it with jQuery:
<script>
$(".image").click(function(){
$(this).addClass("clicked").delay(800).removeClass("clicked");
});
</script>
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image.clicked {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

HTML
<img src = "some_image.png" alt = "test" class = "rotative" />
CSS
.canRotate
{
-webkit-animation: FullRotation 3s ease-out;
-o-animation: FullRotation 3s ease-out;
-ms-animation: FullRotation 3s ease-out;
-moz-animation: FullRotation 3s ease-out;
animation: FullRotation 3s ease-out;
}
#-webkit-keyframes FullRotation
{
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-o-keyframes FullRotation
{
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
#-ms-keyframes FullRotation
{
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes FullRotation
{
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#keyframes FullRotation
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
JavaScript
function RotateOnClickAndOpenPage(classname, url)
{
var elts = document.getElementsByClassName(classname);
for(var i = 0; i < elts.length; ++i)
{
elts[i].onclick = function(){
this.style.className = "canRotate";
var that = this;
setTimeout(function(){
window.open(url);
that.style.className = "cannotRotate";
}, 3000);
};
}
}
// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");