Помогите связать правила между собой

[McLotos]

Добрый день!

Подскажите как в css связываются правила? Ну т.е. я хочу чтобы по какому-то событию происходило несколько вещей. Если более предметно, то есть прогресс-бар

.progress {  overflow: hidden;  margin-top: 10px;  padding: 0 15px;  width: 100%;  height: 34px;  background: #d3d5d9;  border-radius: 17px;  background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);  background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);  background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);  background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);}.progress-val {  float: right;  margin-left: 15px;  font: bold 15px/34px Helvetica, Arial, sans-serif;  color: #333;  text-shadow: 0 1px rgba(255, 255, 255, 0.6);}.progress-bar {  display: block;  overflow: hidden;  height: 8px;  margin: 13px 0;  background: #b8b8b8;  border-radius: 4px;  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);}.progress-in {width:0;  display: block;  min-width: 8px;  height: 8px;  background: #1997e6;  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);  border-radius: 4px;  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);  -moz-animation:progressmove 30s ease-out infinite;	-webkit-animation:progressmove 30s ease-out infinite;}@keyframes progressmove {    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }}@-moz-keyframes progressmove {    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	}@-webkit-keyframes progressmove {0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.7;}16%, 36%, 56%, 76%, 96% { width:100%; opacity:1; }17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.7; }18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	} 

И есть собственно само слайдшоу, у которого смена кадра происходит по клику

#container {width: 960px;margin: 0 auto;}#slideshow {width: 900px;margin: 50px auto 0 auto;padding: 50px 0 0 0;-webkit-perspective: 800;}figure {display: inline;-webkit-transform-style: preserve-3d;}#box { position: relative; display: block; width: 900px; height: 400px;  -webkit-transform: translateZ(-200px); /* Сдвигаем 3D объект назад к плоскости */ -webkit-transition: -webkit-transform 1s;  /* Переход для трансформации */}#box img {position: absolute;top: 0;left: 0;}figcaption { display: inline-block; width: 70px; height: 35px; background: rgba(0,0,0,0.6); border: 1px solid rgba(0,0,0,0.7); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; line-height: 35px; color: #ffffff; text-shadow: 1px 1px 1px #000000; cursor: pointer;  position: relative; top: -50px; left: 150px; margin: 0 30px 0 0;  -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;  } figcaption:hover {background: rgba(0,0,0,0.8);}#box img:nth-child(1) {-webkit-transform: rotateX(0deg) translateZ(200px);}#box img:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(200px);}#box img:nth-child(3) {-webkit-transform: rotateX(90deg) translateZ(200px);}#box img:nth-child(4) {-webkit-transform: rotateX(-90deg) translateZ(200px);}#box img:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(200px);}#box img:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(700px);}#fig1:focus #box {-webkit-transform: translateZ(-200px) rotateY(0deg);}#fig2:focus #box {-webkit-transform: translateZ(-200px) rotateX(-180deg);}#fig3:focus #box {-webkit-transform: translateZ(-200px) rotateX(-90deg);}#fig4:focus #box {-webkit-transform: translateZ(-200px) rotateX(90deg);}#fig5:focus #box {-webkit-transform: translateZ(-450px) rotateY(90deg);}#fig6:focus #box {-webkit-transform: translateZ(-450px) rotateY(-90deg);} 

Вот тут можно посмотреть в работе

http://jsfiddle.net/7JFkP/

Подскажите как переделать правила слайдшоу так чтобы оно не ждало кликов а срабатывало когда прогрессбар дойдёт до конца.

 

[afdw]

На CSS не получится, на JS сделал: http://jsfiddle.net/7JFkP/5/.

Edited April 30, 2014 by afdw

[McLotos]

 

На CSS не получится

 

Нет ничего невозможного! =)))))

Допилил вариант без js.

Слайды

#container {width: 960px;margin: 0 auto;}#slideshow {width: 100%;margin: 50px auto 0 auto;padding: 50px 0 0 0;-webkit-perspective: 800;}figure {display: inline;-webkit-transform-style: preserve-3d;}#box { position: relative; display: block; width: 100%; height: 400px;  -webkit-transform: translateZ(-200px); /* Сдвигаем 3D объект назад к плоскости */ -webkit-transition: -webkit-transform 1s;  /* Переход для трансформации */ -moz-animation:banners 50s ease-out infinite;	-webkit-animation:banners 50s ease-out infinite;}#box img {position: absolute;top: 0;left: 0;}figcaption { display: inline-block; width: 70px; height: 35px; background: rgba(0,0,0,0.6); border: 1px solid rgba(0,0,0,0.7); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; line-height: 35px; color: #ffffff; text-shadow: 1px 1px 1px #000000; cursor: pointer;  position: relative; top: -50px; left: 150px; margin: 0 30px 0 0;  -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;}figcaption:hover { background: rgba(0,0,0,0.8);}#box img:nth-child(1) {-webkit-transform: rotateX(0deg) translateZ(200px);}#box img:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(200px);}#box img:nth-child(3) {-webkit-transform: rotateX(90deg) translateZ(200px);}#box img:nth-child(4) {-webkit-transform: rotateX(-90deg) translateZ(200px);}#box img:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(200px);}#box img:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(700px);}#box {-webkit-animation:bannerslide 30s ease-out infinite;}@keyframes progressmove {  0%,18% {-webkit-transform: translateZ(-200px) rotateY(0deg);}   24%,37%{-webkit-transform: translateZ(-200px) rotateX(-180deg);}   40%,54%{-webkit-transform: translateZ(-200px) rotateX(-90deg);}   65%,75%{-webkit-transform: translateZ(-200px) rotateX(90deg);}   77%,89%{-webkit-transform: translateZ(-450px) rotateY(90deg);}   92%,97%{-webkit-transform: translateZ(-450px) rotateY(-90deg);}}@-moz-keyframes progressmove { 0%,18% {-webkit-transform: translateZ(-200px) rotateY(0deg);}   24%,37%{-webkit-transform: translateZ(-200px) rotateX(-180deg);}   40%,54%{-webkit-transform: translateZ(-200px) rotateX(-90deg);}   65%,75%{-webkit-transform: translateZ(-200px) rotateX(90deg);}   77%,89%{-webkit-transform: translateZ(-450px) rotateY(90deg);}   92%,97%{-webkit-transform: translateZ(-450px) rotateY(-90deg);}}@-webkit-keyframes bannerslide {   0%,18% {-webkit-transform: translateZ(-200px) rotateY(0deg);}   24%,37%{-webkit-transform: translateZ(-200px) rotateX(-180deg);}   40%,54%{-webkit-transform: translateZ(-200px) rotateX(-90deg);}   65%,75%{-webkit-transform: translateZ(-200px) rotateX(90deg);}   77%,89%{-webkit-transform: translateZ(-450px) rotateY(90deg);}   92%,97%{-webkit-transform: translateZ(-450px) rotateY(-90deg);}} 

Прогрессбар

 

#progress {  overflow: hidden;  margin-top: 10px;  padding: 0 15px;  width: 100%;  height: 34px;  background: #d3d5d9;  border-radius: 17px;  background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);  background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);  background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);  background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);}#progress-val {  float: right;  margin-left: 15px;  font: bold 15px/34px Helvetica, Arial, sans-serif;  color: #333;  text-shadow: 0 1px rgba(255, 255, 255, 0.6);}#progress-bar {  display: block;  overflow: hidden;  height: 8px;  margin: 13px 0;  background: #b8b8b8;  border-radius: 4px;  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);}#progress-in {width:0;  display: block;  min-width: 8px;  height: 8px;  background: #1997e6;  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);  border-radius: 4px;  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);  -moz-animation:progressmove 30s ease-out infinite;	-webkit-animation:progressmove 30s ease-out infinite;}@keyframes progressmove {    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }}@-moz-keyframes progressmove {    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	}@-webkit-keyframes progressmove {0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.7;}16%, 36%, 56%, 76%, 96% { width:100%; opacity:1; }17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.7; }18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	}

Разметка

<div id="container">     <div id="slideshow">     <figure id="box">         <img src="/images/1.jpg"/>         <img src="/images/2.jpg"/>         <img src="/images/3.jpg"/>         <img src="/images/4.jpg"/>         <img src="/images/5.jpg"/>         <img src="/images/6.jpg"/>     </figure>

<div class="progress">

    <span class="progress-val">84%</span>

    <span class="progress-bar"><span class="progress-in"></span></span>

  </div>

</div> </div> 

Edited May 4, 2014 by McLotos