I'm trying to get animation timing but it is not working. I have HTML code using bootstrap below and CSS code in relation.
What I want to do is set the background image to do the transition animation for a duration of 1.5s and the text that goes over it for a duration of 2.5s. But I realized that editing the css for "introB" would effect the whole jumbotron section, making the timing for both exactly the same.
I was wondering if anyone would know how to separate the background image with the text so that I can do two different animations for them.
HTML code
<section class="jumbotron" id="introB">
<div class="container">
<div id="introduction" class="slideUp">
<h2 class="col-sm-9">I'm a Developer, Designer and Amateur Photographer living in Canada Ottawa.</h2>
</div>
</div>
</section>
CSS code
#introB{
background-image: url(../images/home.jpg);
background-size: cover;
height: 800px;
position: relative;
animation-name: slideUp;
-webkit-animation-name: slideUp;
-ms-animation-name: slideUp;
-o-animation-name: slideUp;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
visibility: visible !important;
}
#introduction h2{
font-size: 70px;
color: white;
}
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
-ms-animation-name: slideUp;
-o-animation-name: slideUp;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
-ms-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
visibility: visible !important;
}
Thanks for the help in advance!
Related
I'm using keyframes in CSS for the first time.
It didn't work on the 2 browsers I tested (Safari and Chrome) and I learned that all keyframe-related properties need browser prefixes, so I added -webkit- but it still won't work
The purpose is to have the images crossfade every 10 seconds, but I only see Image2 constantly.
Here's the code for the div:
<div id="cf">
<img class="bottom" src="Image1.jpg" width = "300px">
<img class="top" src="Image2.jpg" width = "300px" />
</div>
CSS:
#cf {
position:relative;
width:300px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes cf3FadeInOut {
0% {
-webkit-opacity:1;
}
45% {
-webkit-opacity:1;
}
55% {
-webkit-opacity:0;
}
100% {
-webkit-opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
You have made a mistake calling the animation. the id #cf3 doesn't exist. The rest works fine (but delete the -webkit- for opacity, that css property doesn't need it)
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
FIDDLE
So what I'm working on is a CSS animation, the nav elements and main logo all drop down from above when the page loads (visit www.joeyorlando.me for a live preview of the current animation).
Everything works great except for the fact that if you were to resize the width of your browser, the media queries break the nav appropriately and hide the main nav to show a hamburger-icon mobile nav (still a work in progress). When you resize the window again and make it larger, the animation restarts.
Is there any way to basically tell the animation that once it plays once, never play again and just hold the state that it ended in? I tried using animation-fill-mode: forwards; and animation-iteration-count: 1; to no avail.
HTML
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="logo logo-animated bounceInDown">
<h1>Joey Orlando</h1><br>
<h2>Cancer Researcher | Web Developer</h2>
</div>
<nav class="normalNav" id="normalNav">
<ul>
<li>About</li>
<li>Background</li>
<li>Research</li>
<li>Travels</li>
<li>Contact Me</li>
</ul>
</nav>
CSS Animation
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.about-animated {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.background-animated {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.research-animated {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.travels-animated {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.contact-animated {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.logo-animated {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/**************************
ANIMATION KEYFRAMES - NAVIGATION
**************************/
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
It may not be the best way (I'm not so familiar with CSS3 animations), but you could use JS to detect CSS animation end events and remove the animation classes or try adding: transition: none to the elements you want to stop.
On page load, use JS to check if a session is set, if it's not run the animation and then set the session. When the statement runs again it will detect the previously set session and not run the animation.
I have a simply css animation running on my website which should simply fade in various sections of my webpage at different times. Unfortunately, this aspect of my page works only in chrome and Safari, but not in Firefox and IE.
After doing a little research, I included unit values for the fade timeframes, but this resulted in no improvement. Here is the following css:
a {
text-decoration: none; color: #FFFFFF; position: relative;
transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
}
/*Animations*/
#-webkit-keyframes FADEY {
0% { opacity: 0; }
100% { opacity: 1; }
}
.intro {
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
[role="article"] {
-webkit-opacity: 0;
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
.design-selection, .design-archives {
-webkit-opacity: 0;
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
Any advice would be greatly appreciated.
Thanks,
choltz
You currently have the Webkit's vendor prefix for for animation, -webkit. This is why it only works in Webkit-based browsers such as Chrome and Safari. For older versions of Firefox, you need to add -moz- as well. Current Firefox and current Internet Explorer just use the real version, animation with no prefix.
.intro {
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-moz-animation-name: FADEY;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
animation-name: FADEY;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
You can also write out the CSS shorthand, to minimize the lines of code:
-webkit-animation:FADEY 1s 1 ease-in-out;
-moz-animation:FADEY 1s 1 ease-in-out;
animation:FADEY 1s 1 ease-in-out;
I'm a developer with not much CSS experience. I want to create a pure CSS3 slideshow using two images. I found some nifty code for doing so, and I've implemented a very slight variation below (basically I just took out the #cf3 id selector for img .top):
.slide {
position:absolute;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
The first image is defined as <img class="slideshow top" src="img1.jpg">. The second is the same except without the "top" class.
When I load the page, all of my other CSS works, but the animation is nowhere to be found. Anyone see where I went wrong?
You need to add vendor specific property names, CSS3 animation is still a draft spec.
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-direction: alternate;
-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 10s;
-o-animation-direction: alternate;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
/* and all the keyframes too */
#-webkit-keyframes cf3FadeInOut { ... }
#-moz-keyframes cf3FadeInOut { ... }
#-o-keyframes cf3FadeInOut { ... }
#keyframes cf3FadeInOut { ... }
So i have 3 images i want to animate using the css property, i seem to have two images working fine but cant see how to animate the third image in.
The images should animate as follows
class="top" first for 1.5 seconds
class="middle" second for 1.5 seconds
class="bottom" third for 1.5 seconds
only one image should be visible at one time.
Here is the fiddle link: http://jsfiddle.net/sEd9r/
and here is the code;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Untitled Document</title>
</head>
<body>
<div id="cf3" class="shadow">
<img class="bottom" src="http://dl.dropbox.com/u/21893804/s1.jpg" />
<img class="middle" src="http://dl.dropbox.com/u/21893804/s2.jpg" />
<img class="top" src="http://dl.dropbox.com/u/21893804/s3.jpg" />
</div>
</body>
</html>
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
#cf3 {
position:relative;
height:60px;
width:480px;
margin:0 auto;
}
#cf3 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf3 img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1.5s;
-webkit-animation-direction: normal;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1.5s;
-moz-animation-direction: normal;
animation-delay:3s;
-webkit-animation-delay:3s; /*Safari and Chrome */
}
#cf3 img.middle {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1.5s;
-webkit-animation-direction: normal;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1.5s;
-moz-animation-direction: normal;
animation-delay:1.5s;
-webkit-animation-delay:1.5s; /*Safari and Chrome */
}
I think that you need to make the animate fade from 0 to 1 so that for 1/3 of the time it's at 0. You then stagger them using delay so that only one has the 1 value at once.
I'll try and work it out at some point!