html - css animating pseudo elements affecting divs -
so i'm trying create image slider , it's working except i'm using :before animating progress bar , :after play/pause icon. whole thing meant pause on :hover problem .slider :before , "after don't create .image-container pause on :hover gets out of sync. can help me please
p.s. tried making before , after children of .image-container moved out of frame animation
class="lang-css prettyprint-override">body{ margin:0; padding:0; } .slider{ padding:0; width:1280px; height:720px; position:relative; overflow:hidden; background:green; } .image-container{ width:500%; position:relative; -webkit-animation: slide 20s ease-out 0 infinite normal; animation: slide 20s ease-out 0 infinite mormal; } div.image-container img{ float:left; width:20%; height:auto; } div.slider:after{ content:""; width:0; height:0; position:relative; float:left; top:-688px; left:32px; background:rgba(0,0,0,0); border-top:24px solid transparent; border-left:48px solid rgba(255,255,255,.1); border-bottom:24px solid transparent; transition:all .3s; } div.slider:before{ content:""; width:0; height:0px; z-index:1; position:absolute; float:left; top:700px; border-top:20px double rgba(255,255,255,.1); background:rgba(255,255,255,.1); -webkit-animation: progress 5s ease-out -2s infinite; animation: progress 5s ease-out -2s infinite; } div.slider:hover:before{ -webkit-animation-play-state: paused; animation-play-state: paused; } div.slider:hover:after{ width:16px; height:48px; border-left:48px double rgba(255,255,255,.1); border-top:0 solid transparent; border-bottom:0 solid transparent; } div.image-container:hover{ -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes slide{ 0% {right:0%;} 10% {right:0%;} 15% {right:100%;} 35% {right:100%;} 40% {right:200%;} 60% {right:200%;} 65% {right:300%;} 85% {right:300%;} 90% {right:400%;} 100% {right:400%;} } @keyframes slide{ 0% {right:0%;} 10% {right:0%;} 15% {right:100%;} 35% {right:100%;} 40% {right:200%;} 60% {right:200%;} 65% {right:300%;} 85% {right:300%;} 90% {right:400%;} 100% {right:400%;} } @-webkit-keyframes progress{ 0% {width:0px;} 80% {width:1280px;} 100% {width:0px;} } @keyframes progress{ 0% {width:0px;} 80% {width:1280px;} 100% {width:0px;} } class="lang-html prettyprint-override"><!doctype html> <html> <head> <title>test page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slider"> <div class="image-container"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> <img src="1.jpg"> </div> </div> </body> </html> maybe this?
div.slider:before:hover .image-container{ -webkit-animation-play-state: paused; animation-play-state: paused;
in css:
class="lang-css prettyprint-override">div.slider:hover:before this wrong way of using pseudo elements. have used 2 pseudo elements @ once. create mess.
so, please decide pseudo element utilize while, can style page desired css stylings.
html css animation
No comments:
Post a Comment