Как сделасть плавный прогресс бар который загружается ровно 1 мин?

@-webkit-keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@-webkit-keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
@-moz-keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@-moz-keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
@keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
@-o-keyframes progress{
from{
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform:translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
to {
transform: translateX(0%);
-moz-transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
}
}
@-o-keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.progressbar {
position: relative;
height: 6px;
overflow: hidden;
background: #eaeaea;
animation: hide 0.1s 60s ease-in-out forwards;
-moz-animation: hide 0.1s 60s ease-in-out forwards;
-webkit-animation: hide 0.1s 60s ease-in-out forwards;
-o-animation: hide 0.1s 60s ease-in-out forwards;
}

.progressbar:after{
content: '';
position: absolute;
background: #7ac143;
height: 100%;
width: 100%;
animation: progress 60s linear forwards;
-moz-animation: progress 60s linear forwards;
-webkit-animation: progress 60s linear forwards;
-o-animation: progress 60s linear forwards;
}

Как сделасть плавный прогресс бар который загружается ровно 1 мин?

добавил префиксы -moz- -webkit- -ms- -o- все равно на сафари не работает)

Как сделасть плавный прогресс бар который загружается ровно 1 мин?

спасибо)

Как сделасть плавный прогресс бар который загружается ровно 1 мин?

и не отображается в сафари и других браузерах, в ff и хроме работает =)

Как сделасть плавный прогресс бар который загружается ровно 1 мин?

Спасибо, но не пропадает div)

Как сделать врашение имеджа при наведении на кнопку?

Спасибо, то что нужно)

Как сделать чтобы при наведении на один элемент менялись значения у трех других, у одного текст, второго - фон,третьего - позиция?

спасибо огромное!)