I had tried a simple animation. See this fiddle.
HTML:
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>
CSS:
.special_sec span {
font-size:30px;
list-style:none;
text-align:center;
padding:10px 0;
display:block;
animation:subheadinganimation 17s;
color: transparent;
}
In my CSS (.special_sec span), I have added color: transparent.
My problem is:
If color is transparent, after the animation all the text are getting hidden. See my fiddle.
If I remove this color property, all the text are initially visible. Then the animation also runs. See this fiddle.
I want the text to be visible only after the delay timings that I have given. I can't understand the problem. What is the issue? How can I fix this?
You need to set the animation-fill-mode as forwards so that the element would hold the state as at the final keyframe of the animation (which is color: #000). Without this setting, the element reverts back to its original state (color: transparent) after the animation is complete.
animation: subheadinganimation 17s forwards;
#keyframes subheadinganimation {
0%, 30% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
33%,
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
color: #000;
}
}
.special_sec span {
font-size: 30px;
list-style: none;
text-align: center;
padding: 10px 0;
display: block;
animation: subheadinganimation 17s forwards;
color: transparent;
}
span.sub_heading {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
span.sub_heading1 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
span.sub_heading2 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
span.sub_heading3 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
span.sub_heading4 {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>
Related
I found a cool, very simple text animation on a website that I would like to rebuild. Here is the link (the animation is in the footer of the page): http://www.motherbird.com.au/process/
I'm not familiar with CSS animations yet, but I've managed that so far:
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 5s infinite 0s;
-ms-animation: topToBottom 5s infinite 0s;
-webkit-animation: topToBottom 5s infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 1s;
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.animated span:nth-child(3){
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.animated span:nth-child(4){
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.animated span:nth-child(5){
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
How do I make the transition without fade?
Thanks for your help!
Another idea is to consider content of a pseudo element to change the text and you will have less of code:
.animated {
text-indent: 8px;
color:red;
}
.animated:before {
content: "cool.";
animation: topToBottom 5s infinite 0s;
}
#keyframes topToBottom {
0% {
content: "cool.";
}
25% {
content: "neat.";
}
50% {
content: "awesome.";
}
75% {
content: "groovy.";
}
100% {
content: "magic.";
}
}
<h2>CSS Animations are
<span class="animated">
</span>
</h2>
Since the animation-duration takes 5s, which represents 100% of the whole duration, and you have five spans or words, therefore each span will be visible for 1s or 20% of the time, then hidden until the end. Based on that you need to adjust the %'s inside the #keyframes to met the criteria and achieve the desired result:
.animated {
text-indent: 8px;
}
.animated span {
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
-ms-animation: topToBottom 5s infinite;
-webkit-animation: topToBottom 5s infinite;
animation: topToBottom 5s infinite;
}
.animated span:nth-child(2){
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated span:nth-child(3){
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated span:nth-child(4){
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated span:nth-child(5){
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#-webkit-keyframes topToBottom {
0%, 20% {opacity: 1} /* visible for 1s */
20.01%, 100% {opacity: 0} /* hidden for 4s */
}
<h2 class="animated">
CSS Animations are
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</h2>
Just .01% of a difference between the keyframes makes sure there is no fading effect.
Try visibility: hidden | visible:
.animated{
display: inline;
text-indent: 8px;
position: relative;
}
.animated span{
animation: topToBottom 5s infinite 0s;
-ms-animation: topToBottom 5s infinite 0s;
-webkit-animation: topToBottom 5s infinite 0s;
color: red;
/* display: none; */
overflow: hidden;
position: absolute;
display: inline-block;
visibility: hidden;
}
.animated span:nth-child(2){
animation-delay: 1s;
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.animated span:nth-child(3){
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.animated span:nth-child(4){
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.animated span:nth-child(5){
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#-webkit-keyframes topToBottom{
0% { visibility: hidden; }
20% { visibility: hidden; }
40% { visibility: hidden; }
60% { visibility: hidden; }
80% { visibility: hidden; }
100% { visibility: visible; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
for 10 words:
.animated{
display: inline;
text-indent: 8px;
position: relative;
}
.animated span{
animation: topToBottom 10s infinite 0s;
-ms-animation: topToBottom 10s infinite 0s;
-webkit-animation: topToBottom 10s infinite 0s;
color: red;
/* display: none; */
overflow: hidden;
position: absolute;
display: inline-block;
visibility: hidden;
}
.animated span:nth-child(2){
animation-delay: 1s;
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.animated span:nth-child(3){
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.animated span:nth-child(4){
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.animated span:nth-child(5){
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.animated span:nth-child(6){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(7){
animation-delay: 6s;
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.animated span:nth-child(8){
animation-delay: 7s;
-ms-animation-delay: 7s;
-webkit-animation-delay: 7s;
}
.animated span:nth-child(9){
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.animated span:nth-child(10){
animation-delay: 9s;
-ms-animation-delay: 9s;
-webkit-animation-delay: 9s;
}
#-webkit-keyframes topToBottom{
0% { visibility: hidden; }
10% { visibility: hidden; }
20% { visibility: hidden; }
30% { visibility: hidden; }
40% { visibility: hidden; }
50% { visibility: hidden; }
60% { visibility: hidden; }
70% { visibility: hidden; }
80% { visibility: hidden; }
90% { visibility: hidden; }
100% { visibility: visible; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
<span>more.</span>
<span>lorem.</span>
<span>pixel.</span>
<span>word.</span>
<span>ten.</span>
</div>
</h2>
I have a slideshow with CSS3 which have animation-delay in each child,
but this is not dynamic because for each tag I should add nth-child ,
Is there any way to add animation-delay automatically to li tags?
this is CSS code:
.cb-slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
I want to change this code to add 6s delay to each tags.
There is no way to handle it dynamically except adding inline style dynamically or with javascript
for example
.cb-slideshow li {
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
<div class="cb-slideshow">
<li style="animation-delay: 1s;">test text</li>
<li style="animation-delay: 2s;">test text</li>
<li style="animation-delay: 3s;">test text</li>
<li style="animation-delay: 4s;">test text</li>
<li style="animation-delay: 5s;">test text</li>
</div>
You could use PHP to dynamically echo each part of the style, or intergrate it right into the css.
For example
.button:hover {
border: 10px solid;
transition: <?php echo $lot ?>;
}
Where $lot is the animation time.
I dont know how to get the nth-child(N) in php, but there is undoubtably a way.
Sorry if this wasn't very useful, just wanted to say that php would be a good way to do it.
I am trying to create an animation using CSS3 only which will display a list of items.
I've been able to create an animation that cycles through each item on the list, however, I cannot figure out a solution to having the animation end with the last item on the list displayed.
Essentially, I want the animation to end with the words "Johnney be good" displayed.
This has supposedly been asked and answered in: Stopping a CSS3 Animation on last frame
However, I cannot figure out if or how that solution can be applied to my problem. Thank for your help, it's very appreciated.
#sentence-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: serif;
padding: 10px;
}
.sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.sentence span{
color: #444;
font-size: 200%;
font-weight: normal;
}
.words{
display: inline;
text-indent: 10px;
}
.words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 12s 1 0s;
-moz-animation: rotateWord 12s 1 0s;
-o-animation: rotateWord 12s 1 0s;
-ms-animation: rotateWord 12s 1 0s;
animation: rotateWord 12s 1 0s;
}
.words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b969d;
}
.words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b969d;
}
.words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #6b969d;
}
#-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<div id="sentence-wrapper">
<div class="sentence">
<span>Johnney </span>
<div class="words words-1">
<span><em>smart</em></span>
<span><em>clever</em></span>
<span><em>awesome</em></span>
<span>be good</span>
</div>
</div>
</div>
The "be good" <span> uses the same animation (rotateWord) as the other <span>s. Which ends with opacity: 0;. If you don't want "be good" to fade out after fading in, you should define a separate animation for it:
#keframes rotateWordFinal{
0% { opacity: 0; }
50% { opacity: 0; -webkit-transform: translateY(-30px); }
100% { opacity: 1; -webkit-transform: translateY(0px);}
}
.words-1 span:nth-child(4){
animation: rotateWordFinal 6s 1 9s;
}
Also: you're using all kind of prefixes for the animation properties, but not for the actual #keyframes. Better to keep that consistent.
You'll need to create a separate animation for the last span.
#sentence-wrapper{
font-family:serif;
margin:110px auto 0 auto;
padding:10px;
position:relative;
width:80%;
}
.sentence{
margin:0;
text-align:left;
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.8);
}
.sentence span{
color:#444;
font-size:200%;
font-weight:normal;
}
.words{
display:inline;
text-indent:10px;
}
.words-1 span{
animation:rotateWord 12s 1 0s;
color:#6b969d;
opacity:0;
overflow:hidden;
position:absolute;
}
.words-1 span:nth-child(2){
animation-delay:3s;
}
.words-1 span:nth-child(3){
animation-delay:6s;
}
.words-1 span:last-child{
animation-delay: 9s;
animation-fill-mode: forwards;
animation-name:rotateLast;
}
#keyframes rotateWord{
0%,80%,100%{
opacity:0;
}
2% {
opacity:0;
transform:translateY(-30px);
}
5%,17%{
opacity:1;
transform: translateY(0px);
}
20%{
opacity:0;
transform:translateY(30px);
}
}
#keyframes rotateLast{
0%{
opacity:0;
}
2%{
opacity:0;
transform:translateY(-30px);
}
5%,100%{
opacity:1;
transform:translateY(0px);
}
}
<div id="sentence-wrapper">
<div class="sentence">
<span>Johnney </span>
<div class="words words-1">
<span><em>smart</em></span>
<span><em>clever</em></span>
<span><em>awesome</em></span>
<span>be good</span>
</div>
</div>
</div>
I've almost got it with animation-fill-mode and changing the 100% animation opacity to 1.
#sentence-wrapper {
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: serif;
padding: 10px;
}
.sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.sentence span {
color: #444;
font-size: 200%;
font-weight: normal;
}
.words {
display: inline;
text-indent: 10px;
}
.words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 12s 1 0s;
-moz-animation: rotateWord 12s 1 0s;
-o-animation: rotateWord 12s 1 0s;
-ms-animation: rotateWord 12s 1 0s;
animation: rotateWord 12s 1 0s linear backwards; /* all animations end at 0% value */
}
.words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b969d;
}
.words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b969d;
}
.words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
animation-fill-mode: forwards; /* This animation ends on 100% value */
color: #6b969d;
opacity: 0;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 1; /* Changed from 0 to 1 */
}
}
<div id="sentence-wrapper">
<div class="sentence">
<span>Johnney </span>
<div class="words words-1">
<span><em>smart</em></span>
<span><em>clever</em></span>
<span><em>awesome</em></span>
<span>be good</span>
</div>
</div>
</div>
How can I add a link to these images. I've tried many variations of slideshows but find when I add links it starts not displaying every other image. In my code below I have the links commented out. If I remove the links the images display fine.
I have repeated the images twice just trying to debug and have _parent tag in the link because this page will be displayed in an iframe.
Your help would be greatly appreciated. Thank you for your time reading this post.
HTML
<div class="slider">
<img class='photo' src="featuredProducts/On-Semi-Python-sensors-sm.png"/>
</div>
CSS
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
The problem is correctly with your links.
You have <img> inside anchor, but you try to hide img and leaves its parent anchor visible.
It is impossiple after that to make another image visible until the left parent anchor is hidden. Thus you see a blank white area until time passes to hide this left anchor and a new img can appear.
Solution is to hide the parent anchor of each img to have the right effect.
There are two steps:
HTML : Change class photo from img to anchor
CSS : Change selector to .slider a:nth-child(...)
This modified code works
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div class="slider">
<!--
<img class='photo' src="1.jpg" alt="" />
<img class='photo' src="2.jpg" alt="" />
<img class='photo' src="3.jpg" alt="" />
-->
<a class='photo' href="http://www.google.com" target="_parent" ><img src="1.jpg" alt="On Semi PYTHON sensors" /></a>
<a class='photo' href="http://www.youtube.com" target="_parent" ><img src="2.jpg" alt="" /></a>
<a class='photo' href="http://www.pinterest.com" target="_parent" ><img src="3.jpg" alt="" /></a>
<a class='photo' href="http://www.facebook.com" target="_parent" ><img src="4.jpg" alt="" /></a>
</div>
</body>
</html>
CSS
.slider { margin: 0; width: 180px; height: 1504px; overflow: hidden; position: relative; }
.photo { position: absolute; -webkit-animation: round 16s infinite; opacity: 0; width: 100%; }
#-webkit-keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } }
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
Thats because of position: absolute for the images with photo class. You my remove the position: absolute from photo and add it to a elements instead.
.slider a{
position: absolute;
display: block;
}
.photo {
-webkit-animation: round 16s infinite;
opacity: 0;
width: 100%;
}
just replace .slide img with .slide a
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
a {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
}
img {
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" />
<img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" />
</div>
The code below helped. The images display nicely, but I need to link to separate pages for the images. Even when another image is displayed, the first link is active - in other words the links aren't mapping link2 with image2, link3 with image3...
Please take a look below and let me know if you see how to fix it. Thank you!
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
.slider a {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
}
img {
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" />
<img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" />
</div>
I have the following CSS3 animation I want to do in chrome: (fadeIn, and change text color). I have a div element with class "divvy" and contains the text "Hello World". I don't know whyMy CSS is:
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes example {
from {color: black;}
to {color: yellow;}
}
#keyframes example {
from {color: black;}
to {color: yellow;}
}
.divvy {
color: black;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 6s;
}
HTML is:
<div class="divvy fade-in">Hello World</div>
The inclusion of webkit-animation-name also appears to make the text disappear for some reason.
Your code looks good to me. You can run the code below to see it working:
fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes example {
from {color: black; opacity:0;}
to {color: yellow; opacity:1;}
}
#keyframes example {
from {color: black; opacity:0;}
to {color: yellow; opacity:1;}
}
.divvy {
color: black;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 6s;
}
<div class="divvy fade-in">Hello World</div>
You could accomplish similar effects using the CSS3 transition property and a bit of JS (I used jQuery):
$(document).ready(function() {
setTimeout(function() {
$(".divvy").first().removeClass("fade-in");
}, 1000);
});
.divvy {
opacity: 1;
transition: opacity 4s;
}
.fade-in {
opacity: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="divvy fade-in">Hello, World</div>