keyframe

Run css animation back and forth on clicks

扶醉桌前 提交于 2021-02-18 22:30:07
问题 With css @keyframes I'm trying to attach some animation to an element when it is clicked. .animate { animation-name: action; animation-duration: 2s; animation-timing-function: linear; background-color: green; } @keyframes action { 0% { background-color: gray; } 50% { background-color: red; } 100% { background-color: green; } } DEMO The .animate class is added on click, and the box animates from gray to green. But now I would like to animate back to gray when I click it again (toggle

How do I Rotate, Translate, and Scale rectangle from a keyframe using popmotion pure?

杀马特。学长 韩版系。学妹 提交于 2021-02-07 03:53:52
问题 How do I make the last keyframe rotate my rectangle to a 35deg angle using popmotion pure? https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111 HTML: <div class="flex h-screen w-screen justify-center items-center"> <div class="portal-b"> <h1 class="left"></h1> </div> </div> <button class="trigger fixed z-10 left-0 top-0"> B replace A </button> CSS: .portal-b { background: blue; width: 1px; height: 100px; } JS const { easing, keyframes, styler } = window.popmotion; const trigger =

How do I Rotate, Translate, and Scale rectangle from a keyframe using popmotion pure?

耗尽温柔 提交于 2021-02-07 03:53:41
问题 How do I make the last keyframe rotate my rectangle to a 35deg angle using popmotion pure? https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111 HTML: <div class="flex h-screen w-screen justify-center items-center"> <div class="portal-b"> <h1 class="left"></h1> </div> </div> <button class="trigger fixed z-10 left-0 top-0"> B replace A </button> CSS: .portal-b { background: blue; width: 1px; height: 100px; } JS const { easing, keyframes, styler } = window.popmotion; const trigger =

How do I Rotate, Translate, and Scale rectangle from a keyframe using popmotion pure?

吃可爱长大的小学妹 提交于 2021-02-07 03:53:29
问题 How do I make the last keyframe rotate my rectangle to a 35deg angle using popmotion pure? https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111 HTML: <div class="flex h-screen w-screen justify-center items-center"> <div class="portal-b"> <h1 class="left"></h1> </div> </div> <button class="trigger fixed z-10 left-0 top-0"> B replace A </button> CSS: .portal-b { background: blue; width: 1px; height: 100px; } JS const { easing, keyframes, styler } = window.popmotion; const trigger =

How do I Rotate, Translate, and Scale rectangle from a keyframe using popmotion pure?

半腔热情 提交于 2021-02-07 03:52:22
问题 How do I make the last keyframe rotate my rectangle to a 35deg angle using popmotion pure? https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111 HTML: <div class="flex h-screen w-screen justify-center items-center"> <div class="portal-b"> <h1 class="left"></h1> </div> </div> <button class="trigger fixed z-10 left-0 top-0"> B replace A </button> CSS: .portal-b { background: blue; width: 1px; height: 100px; } JS const { easing, keyframes, styler } = window.popmotion; const trigger =

Keyframe CSS animation overwrites hover transition

狂风中的少年 提交于 2021-01-27 14:52:53
问题 I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a fiddle: http://jsfiddle.net/Garavani/yrnjaf69/2/ <div class= "category_item"> <div class= "cat_button"> <span class="title_cat">TEXT</span> </div> </div> CSS: .category_item { position: absolute; background-color: #999; top: 100px; left: 50px; width: 200px; height: 200px; /* seems to be overwriten by animation keyframes */ -webkit-transition: -webkit-transform 0.215s ease-in-out; transition:

css slideshow background has to load

拜拜、爱过 提交于 2021-01-20 12:01:44
问题 I made a simple css slideshow for my background with keyframe and I have resized the pictures to about 60kb each, (they look awfull but I was testing to see if it would work) and to my surprise it didnt work, the pictures still have to load up. This is my css for my slideshow, not sure if it can help but I'll put it up anyway. body { background-size: cover; animation: div 20s infinite; height: 100vh; margin: 0; background-position: center; background-repeat: no-repeat; background-blend-mode:

css slideshow background has to load

杀马特。学长 韩版系。学妹 提交于 2021-01-20 12:01:07
问题 I made a simple css slideshow for my background with keyframe and I have resized the pictures to about 60kb each, (they look awfull but I was testing to see if it would work) and to my surprise it didnt work, the pictures still have to load up. This is my css for my slideshow, not sure if it can help but I'll put it up anyway. body { background-size: cover; animation: div 20s infinite; height: 100vh; margin: 0; background-position: center; background-repeat: no-repeat; background-blend-mode: