css-animations

CSS Animation pausing when element is hidden

由 ╄→гoц情女王★ 提交于 2019-12-12 07:28:06
问题 I'm working on adding click/touch animations to buttons on a project I'm working on, and I've come across a frustrating problem concerning animating buttons which show and hide elements. The project is a single page mobile web app with a handful of buttons on it. I'm using jQuery to set a css keyframe animation on a button when it's pressed. The button hides the current page, and shows a new one. The problem is, when I click the button, the page changes before the animation is complete, and

Dynamically changing content of a SPAN

由 你。 提交于 2019-12-12 06:59:32
问题 How can I dynamically change the content of a <span> tag in an infinite loop. I have tried using the below method. Is it possible to do this with pure CSS animations? If it is not possible with pure CSS, please suggest an alternate method. HTML: <p>Lorem ipsum <span></span> sit amet.</p> CSS: span { content: ''; animation: flip 2s infinite; } @keyframes flip { 10% { content: 'Example no1'; } 40% { content: ''; } 80% { content: 'Example no2'; } 100% { content: ''; } } Demo Fiddle 回答1: Changing

Translate and scale animation issue

由 浪尽此生 提交于 2019-12-12 06:18:22
问题 @keyframes my-animation { 0% { transform: translate(0, 40%) scale(0); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } 100% { transform: translateY(0%); } } I'm trying to make my element pop then move on the Y axis, but the above fails to work. Where am I going wrong? 回答1: Transform property gets overridden during your animation. So even though the keyframe at 0% says translate by 40% in Y-axis, the second frame at 10% nullifies it. There is a movement between 0% and 10% but that

Moving an image with 360° angle in Javascript

由 早过忘川 提交于 2019-12-12 05:55:34
问题 I am trying to make an image move 360° (not rotate) back it's course, but so far I was able to move only to a specific direction, if I add left & bottom course, then the image going diagonal to left & bottom. Here are the properties: CSS #circle{ background:red; border-radius:100px; height:100px; width:100px; position:absolute; } JavaSript (function() { var speed = 10, moveBox = function(){ var el = document.getElementById("circle"), left = el.offsetLeft, moveBy = 3; el.style.left = left +

CSS next & previous clip path animation

由 ≡放荡痞女 提交于 2019-12-12 05:19:44
问题 Following on from a related question that I posted last week, I have created a custom carousel that uses clip-path to provide a snippet of the next and previous slides. This is currently working functionally, but I now need to apply some animations when showing/hiding the slides. In the related question, only the "next slide" functionality was needed, and a solution that was provided was to clip the "active" slide. However now since we need to do next and previous slides, I have applied the

Reset CSS transform origin after translation / rotation

由 旧时模样 提交于 2019-12-12 04:37:34
问题 After translating an element in CSS it's transformation origin stays in it's original location. In this particular case I want the transformation origin to stay centered relative to the element during all transforms. I want the origin to sort of follow the element being transformed. I know about the transform-origin property but that seems to require me to manually move the origin with the element each time...And even if I could do that in JavaScript, it seems very math heavy and not

Javascript toggle animation of height in Angular

由 白昼怎懂夜的黑 提交于 2019-12-12 04:05:49
问题 I have the following animation defined in my Angular app for toggling the hight/opacity of an element. It works as expected, however I'm now using it to toggle a 'main menu' and the 'sub-menus' within. When the main menu is opened it increases from 0 to X height, then if I open a sub menu the main menu remains at X height, whereas I'd like it to expand to the height of the main menu + height of the newly opened sub-menu. app.animation('.slide_toggle', ['$animateCss', function ($animateCss) {

Animate CSS Overlay to FadeIn and FadeOut

由 做~自己de王妃 提交于 2019-12-12 03:45:54
问题 I have a css overlay that covers the entire viewport when a button is clicked. It fadesIn from opacity: 0 to opacity: 1 using css keyframes. The overlay is dependent upon a js plugin adding a class to the <body> element. So when that class is applied, the overlay is set to display: block I'm trying to animate this effect in reverse. So when the class is removed, the overlay fades out. I understand that I can apply multiple animations to the .overlay class, but I'm unsure how to proceed. Any

CSS3 Animation under Firefox 14

由 风格不统一 提交于 2019-12-12 01:48:59
问题 I'm having problems with the following animation: .anim { -moz-animation-delay: 0s; -moz-animation-iteration-count: infinite; -moz-animation-duration: 6s; -moz-animation-fill-mode: forwards; -moz-animation-name: animation_1; -moz-animation-play-state: running; -moz-animation-timing-function: linear; -moz-transform-origin: right top; background-image:url("http://jsfiddle.net/css/../img/logo.png"); height:25px; width: 160px; z-index: 1; position: absolute; } .container { left: 100px; top: 100px

CSS3 Animations Slide-In Div

由 做~自己de王妃 提交于 2019-12-12 01:14:46
问题 I'm creating an html file with the basic structure of this: <!DOCTYPE html> <html> <head> </head> <body> <div id="main"> <h1>Title</h1> <div id="div1"></div> <div id="div2"></div> <div id="div2"></div> </div> </body> </html> Right now, #div1 and #div3 have the css3 setting {visibility: hidden} . On User input, I want #div1 slide in from the left and push #div2 out of the window, and #div3 slide in from the right respectively. Here is an image to show it: I basically want it to look like the
订阅 css-animations