8 Replies - 696 Views - Last Post: 10 June 2015 - 08:51 AM

#1 mixahlos   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

css animation in multiple elements

Posted 10 June 2015 - 07:41 AM

Hi,
I have an issue with animating css
I have a slideshow in which I don't have access to javascript. I can only change the css
The stracture is :
<ul>
<li>
<h3><span class="anim1">Test-1</span><span class="anim2">Test-2</span>
</li>
<li>
<h3><span class="anim1">Test-1</span><span class="anim2">Test-2</span>
</li>
<li>
<h3><span class="anim1">Test-1</span><span class="anim2">Test-2</span>
</li>
</ul>



Only 1 li is visible at a time and the javascript loops thhrough the li's changing the opacity.
Now I have css animation to .anim1 and then to .anim2
The first time works fine, but for all the next occurances the spans are in the last state the animation ended.

Is there any way to control it ?

Thank you

Is This A Good Question/Topic? 0
  • +

Replies To: css animation in multiple elements

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: css animation in multiple elements

Posted 10 June 2015 - 07:50 AM

The first thing to do is fix your HTML because the h3 elements require closing tags.
Was This Post Helpful? 0
  • +
  • -

#3 mixahlos   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

Re: css animation in multiple elements

Posted 10 June 2015 - 07:53 AM

View Postandrewsw, on 10 June 2015 - 07:50 AM, said:

The first thing to do is fix your HTML because the h3 elements require closing tags.

Sorry I just wrote the code on the fly in the editor it's not the actual code.
I am editing the post
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: css animation in multiple elements

Posted 10 June 2015 - 08:02 AM

Please just copy and paste the real code.
Was This Post Helpful? 0
  • +
  • -

#5 mixahlos   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

Re: css animation in multiple elements

Posted 10 June 2015 - 08:09 AM

Here is the code :
<div data-uk-slideshow="{autoplayInterval: 5000}">
    <div class="uk-slidenav-position">
        <ul class="uk-slideshow uk-slideshow-fullscreen uk-overlay-active">
            <li style="min-height: 400px;" aria-hidden="false" class="uk-active"><div class="uk-cover-background uk-position-cover" style="background-image: url(http://adore2.fi-electronics.com/images/slideshow/adore-01.jpg);"></div>
                <img src="/images/slideshow/adore-01.jpg" alt="Alluring" width="1200" height="600" style="width: 100%; height: auto;">
                <div class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center uk-overlay-background uk-overlay-fade">
                	<div>
                    	<h3 class="uk-h3"><span class="huge">A</span><span class="desc">lluring</span></h3>
                    </div>
                </div>
            </li>
            <li style="min-height: 400px;" aria-hidden="true"><div class="uk-cover-background uk-position-cover" style="background-image: url(http://adore2.fi-electronics.com/images/slideshow/adore-12.jpg);"></div>
            <img src="/images/slideshow/adore-12.jpg" alt="Dreamy" width="1048" height="699" style="width: 100%; height: auto;"
            <div class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center uk-overlay-background uk-overlay-fade">
            	<div>
            		<h3 class="uk-h3"><span class="huge">D</span><span class="desc">reamy</span></h3>                        
            	</div>
            </div>
            </li>
        </ul>
    </div>
</div>


and the css
/*keyframes */
@-webkit-keyframes slide-title {0% {opacity:1;} 100% {opacity:0;}}
@-moz-keyframes slide-title {0% {opacity:1;} 100% {opacity:0;}}
@-o-keyframes slide-title {0% {opacity:1;} 100% {opacity:0;}}
@keyframes slide-title {0% {opacity:1; filter: alpha(opacity=100);} 100% {opacity:0; filter: alpha(opacity=0);}}

@-webkit-keyframes slide-title-h {
	0% {opacirt:0; color:#fff;} 
	30% {opacity:1; color:#DC2A1B;} 
	90% {opacity:1; color:#DC2A1B;} 
	100% {opacity:0; color:#DC2A1B;}}
@-moz-keyframes slide-title-h {
	0% {opacirt:0; color:#fff;} 
	30% {opacity:1; color:#DC2A1B;} 
	90% {opacity:1; color:#DC2A1B;} 
	100% {opacity:1; color:#DC2A1B;}}
@-o-keyframes slide-title-h {
	0% {opacirt:0; color:#fff;} 
	30% {opacity:1; color:#DC2A1B;} 
	90% {opacity:1; color:#DC2A1B;} 
	100% {opacity:1; color:#DC2A1B;}}
@keyframes slide-title-h {
	0% {opacirt:0; color:#fff; filter: alpha(opacity=0);} 
	30% {opacity:1; filter: alpha(opacity=100);color:#DC2A1B;} 
	90% {opacity:1; filter: alpha(opacity=100);color:#DC2A1B;} 
	100% {opacity:0; filter: alpha(opacity=0);color:#DC2A1B;}}

@-webkit-keyframes slide-title-s {
	0% {opacity:0;} 30% {opacity:1;} 70% {opacity:1;} 100% {opacity:0;}}
@-moz-keyframes slide-title-s {
	0% {opacity:0;} 30% {opacity:1;} 70% {opacity:1;} 100% {opacity:0;}}
@-o-keyframes slide-title-s {
	0% {opacity:0;} 30% {opacity:1;} 70% {opacity:1;} 100% {opacity:0;}}
@keyframes slide-title-s {
	0% {opacity:0; filter: alpha(opacity=0);} 30% {opacity:1; filter: alpha(opacity=1);} 70% {opacity:1; filter: alpha(opacity=1);} 100% {opacity:0; filter: alpha(opacity=0);}}
	
/* animations */
.uk-overlay-panel {-webkit-animation: slide-title 1s 1 3s; -webkit-animation-fill-mode:forwards;
animation:slide-title 1s 1 3s; animation-fill-mode:forwards;
}
h3.uk-h3 span {color:#fff;}
h3.uk-h3 span.huge {font-size:250%;
animation:slide-title-h 4s 1 ; animation-fill-mode:forwards;
-webkit-animation: slide-title-h 4s 1; -webkit-animation-fill-mode:forwards;}


Thank you
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: css animation in multiple elements

Posted 10 June 2015 - 08:13 AM

You have mis-spelt opacity a number of times.
Was This Post Helpful? 0
  • +
  • -

#7 mixahlos   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

Re: css animation in multiple elements

Posted 10 June 2015 - 08:31 AM

You are right,
The animation works but only the 1st time.
the problem is that I want the animation to work for avery time the
you can see it live at : http://adore.fi-electronics.com

Thank you
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: css animation in multiple elements

Posted 10 June 2015 - 08:38 AM

What am I looking for? The large sliders, and their captions, are animated (in GC) and I cannot find any elements beginning with "uk". There is nothing named "slide-title" either.
Was This Post Helpful? 0
  • +
  • -

#9 mixahlos   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

Re: css animation in multiple elements

Posted 10 June 2015 - 08:51 AM

View Postmixahlos, on 10 June 2015 - 08:31 AM, said:

You are right,
The animation works but only the 1st time.
the problem is that I want the animation to work for avery time the
you can see it live at : http://adore.fi-electronics.com

Thank you

Sorry I haven't sleep the last 2 days,
the url is http://adore2.fi-electronics.com

thank you
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1