I have integrated the wow.js for my project and i have encountered a problem with animation.
The animation class which i used to animate the div is working only if i paste the css class from animate.css into my page as embedded style sheet and also the div is showing even if i give a delay in data-wow-delay="5s"and animation works properly after 5 sec. Plz help me if anyone knows why this is happening.
Here is my code..
HTML :
<div class="cssAnimation hidediv">
<div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s">
Anmation goes here 1
</div>
</div>
CSS :
<style type="text/css">
.dial1{
width:200px;
height: 100px;
display: block;
position: absolute;
background: #000;
color:#fff;
padding: 10px;
right: 0;
z-index: 9999;
}
.dial2{
width:200px;
height: 100px;
display: block;
position: absolute;
background: #000;
color:#fff;
padding: 10px;
right: 210px;
}
.hidediv{
-webkit-animation: hide 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 5s;
animation: hide 2s forwards;
animation-iteration-count: 1;
animation-delay: 5s;
}
#-webkit-keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility:hidden;
display: none;
}
}
#keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility:hidden;
display: none;
}
}
.cssAnimation{
width:600px;
height: 300px;
position: absolute;
/* display: none; */
z-index: 9999;
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
</style>
Your css needs to include the .animated class from animate.css, as that's what will be added by Wow.js (unless you specify another selector) when the element is in view, triggering your animations.
Related
I am displaying div from right to left and after 5 sec it will hide. I tried some code right to left is working but after 5 sec it's not hiding.
I tried opacity:0 inside keyframe but then my animation not working.
Would you help me out in this?
.successAlet {
background-color: red;
color: #fff;
position: fixed;
top: 0;
width: 400px;
right: 0;
z-index: 1001;
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
<div class="successAlet">
<h2>Animate and then autohide in 5 sec</h2>
</div>
Consider a second animation. You can also simplify your code by removing a lot of non needed properties
.successAlet {
background-color: red;
color: #fff;
position: fixed;
top: 0;
width: 400px;
right: 0;
z-index: 1001;
animation-name: fadeInRight,hide;
animation-duration: 1s;
animation-delay: 0s,3s;
animation-fill-mode: both;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
#keyframes hide {
100% {
opacity: 0;
}
}
<div class="successAlet">
<h2>Animate and then autohide in 5 sec</h2>
</div>
for smooth hide
#keyframes hide {
100% {
opacity: 1;
width: 0;
}
}
I need a slider which would move slides in a vertical direction. The issue with my code is that transition between slides are too slow. Each slide should stay at least 5 sec and transition between next slide should be very quick like we see at the slick slider and so.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 17s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 6.25s;
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 11.5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(10px);
opacity: 1;
}
25% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(-20px);
opacity: 1;
}
50.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
JSFiddle
You need to adjust the values of
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 3s infinite; /*adjust here*/
}
#slideshow li:nth-child(2) {
animation-delay: 1.25s; /*Adjust here*/
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 1.5s;/*Adjust here*/
opacity: 0;
}
https://jsfiddle.net/Ljhdeb0c/6/
By changing percentage of animation keyframe I have done it. This is what I was looking for.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
position: absolute;
left: 0px;
height:20px;
top: 0;
animation: slide 10s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(20px);
opacity: 1;
}
5%, 50%{
transform: translateY(0);
opacity: 1;
}
51% {
transform: translateY(-20px);
opacity: 0;
}
51.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
</ul>
fiddle
I have a rotate animation that I am symbolizing that something is loading. This works great (except it doesn't rotate continuously, it kind of stops some when it has went around 360 degrees), but on some phones (I have an android note 4) it doesn't spin at all. Then on others (iphones) my circle actually rotates like it is swinging or it is fixed at one corner of the circle and it spins from that axis.
I have webkits in my code and I have the img set to this:
#spinning-circle img {
width: 100%;
height: auto;
}
Why would my image be doing these things. I can give the web url to see this live if you want to see it in a mobile setting.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width:640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 50px;
height: 50px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: blue;
font-size: 1.5em;
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>
You need to use prefixed -webkit-transform in prefixed #webkit-keyframes and not-prefixed transform in not-prefixed #keyframes. And also you need to add prefixed -webkit-animation.
If you want animation doesn't stop at the end, you could use animation-timing-function: linear, but then animation'll have a constant speed.
You don't need to duplicate #keyframes and other properties inside #media screen {}.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
-webkit-animation: spinning-circle linear 2s infinite;
animation: spinning-circle linear 2s infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width: 640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
width: 50px;
height: 50px;
}
#spinning-circle-title {
color: blue;
font-size: 1.5em;
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>
You have to add animation-timing-function: linear; in your animation definition.
Here you have a code working https://jsfiddle.net/xhurpqLd/
-- EDIT --
You also have
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
}
}
You only define the transform for webkit. Change to
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
transform: rotate(360deg) ;
}
}
Here you have the updated code https://jsfiddle.net/xhurpqLd/3/. It works on my Android.
You can also add -ms-transform for IE support.
Lines 731-733 and 1391-1393 of main-style.css appear to be causing the swinging problem.
*::after, *::before {
content: '';
}
should be
*::after, *::before {
content: '';
display: table;
}
assuming you're trying to use this clearfix method
I set up a simple css animation, to make a circle grow, but it does not start. What is wrong?
js fiddle
HTML
<ul><li></li></ul>
CSS
li {
position: absolute;
height: 70px;
width: 70px;
display:block;
border: 5px solid red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
animation: growUp 1s;
animation-iteration-count: infinite;
}
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
You are using the wrong prefixes for your keyframes.
Try changing:
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
to
#keyframes growUp {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
That should fix your animation.
Read up here to see what prefixes you should use and where: http://shouldiprefix.com/
Updated fiddle as well: http://jsfiddle.net/6c79780r/4/
For completeness - the webpage "Should I Prefix" states you should prefix for animations like so: You can set it up this way for all prefixes as well.
#-webkit-keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
#keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
.example.is-animating {
...
-webkit-animation: MyAnimation 2s; /* Chr, Saf */
animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */
}
A complete and comprehensive breakdown of the CSS3 animation property can be found here: http://css3files.com/animation/
I am trying to add this scroll animation script to my website: http://codepen.io/zutrinken/pen/yhqEA
#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: absolute;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
color: #000;
}
#scrolldown > p {
text-transform: uppercase;
text-indent: 3px;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: absolute;
width: 26px;
}
.mouse span {
display: block;
font-size: 1.5em;
margin: 6px auto;
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
<div id="scrolldown">
<p>scroll</p>
<div class="mouse">
<span><p>↓</p></span>
</div>
</div>
The animation works in Chrome while in Code Pen but i can not get it to work outside of Code Pen. How Can I get this script to work with other browsers?
http://rapidevac.biz/tapreport/ This is my website that i added the script to. Like i said, it works with IE 9 but not with other browsers.
Thanks guys for reviewing my question!
Add this after your #keyframes scroll to se the animation in all browsers
#-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
#-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
Your transitions are not cross-browser friendly.
Change your #scrolldown p css to this:
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}