css-animations

Background size animation not working in IE11 or Ipad

由 那年仲夏 提交于 2021-02-19 07:29:21
问题 I am trying to create a simple img zoom with CSS3 animation by setting a background image to a div and then resizing that div with the animation. It works fine in FF and Chrome yet in Safari the effect is not smooth. I've read that adding -webkit-transform: translateZ(0) can help with smoother animations in Safari yet this has no effect. Can anyone help. Site here http://form-flourish.businesscatalyst.com/form-pilates.htm Here is my code. HTML: <div id="home"> </div> CSS: div#home {

CSS Animation Fade In pause… Fade Out

由 耗尽温柔 提交于 2021-02-19 04:05:00
问题 I’m trying to get some (will be images) blocks to fade in pause for a few seconds and then fade out.... I’ve got it so far but it doesn’t seem to want to stay faded out and i’m unsure where i’m going wrong. After its faded out it then shows up again. I have a fiddle which shows it very basicly. /* Defines the animation keyframes */ @-webkit-keyframes fadein { 0% { opacity: 0; } 72% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadein { 0% { opacity: 0; } 72% { opacity: 0; } 100% {

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

Animate.css Not working

由 天大地大妈咪最大 提交于 2021-02-18 22:27:08
问题 I am using animate.css but it don't seem to work in firefox. The code I am using is: <html> <head> <link rel="stylesheet" href="animate.css"/> </head> <body> <div class="rotateIn"> content</div> </body> </html> I want this div to show rotate in effect when we load the page but it don't seem to work. 回答1: you have to use animated class if you want to show animations try this <html> <head> <link rel="stylesheet" href="animate.css"/> </head> <body> <div class="animated rotateIn"> content</div> <

keyframes delay between iterations

由 倖福魔咒の 提交于 2021-02-18 19:09:40
问题 Is there a way to make the animation-delay happen not only at the begining but also between iterations ? Say you have this example: .lv1 { width: 200px; height: 200px; background: red; animation: flu 1s infinite; animation-delay: 2s; } .lv2 { background: orange; } .lv3 { background: yellow; } .lv2, .lv3 { width: 70%; height: 70%; animation: inherit; } @keyframes flu { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } } <div class="lv1"> <div class="lv2"> <div class="lv3"

CSS Scale animation also moves image to left?

由 匆匆过客 提交于 2021-02-16 15:55:29
问题 I'm trying to make an image gallery that uses CSS animations, but I'm having some weird effects come up. I have a smaller thumbnail image to start, and I want it to scale to twice the size when I hover over it. That part works, but it also makes it move to the left, and it ends up going over the edge of the screen. What should I do to fix it? <style> .zoom { transition:1s ease-in-out; } .zoom:hover { transform:scale(2); } </style> <div class="content"> <div class="zoom"> <img alt="Paperplane"

CSS Scale animation also moves image to left?

由 女生的网名这么多〃 提交于 2021-02-16 15:55:29
问题 I'm trying to make an image gallery that uses CSS animations, but I'm having some weird effects come up. I have a smaller thumbnail image to start, and I want it to scale to twice the size when I hover over it. That part works, but it also makes it move to the left, and it ends up going over the edge of the screen. What should I do to fix it? <style> .zoom { transition:1s ease-in-out; } .zoom:hover { transform:scale(2); } </style> <div class="content"> <div class="zoom"> <img alt="Paperplane"

I need a help to animated my web project with gsap staggerFromTo()

由 烂漫一生 提交于 2021-02-11 15:03:08
问题 I want to popup my footer thumbnailed one by one with staggerFromTo() property. Here is my HTML code. <div class="footer"> <img src="img/pic1.jpg" alt=""> <img src="img/pic2.jpg" alt=""> <img src="img/pic3.jpg" alt=""> <img src="img/pic4.jpg" alt=""> </div> Here is my js code: const footer = document.querySelector(".footer"); const tl = new TimelineMax(); tl.staggerFromTo(footer,1.5,{y: "-100px"},{y: "0%",stagger:0.2}) 回答1: You don't need this CSS. It's just to visualize the example! I hope I

How to use margins in CSS Firefox animations

由 不打扰是莪最后的温柔 提交于 2021-02-11 13:50:17
问题 I have an animation: @media (max-width: 768px). {.fptext {color:white; font-weight: bolder; position: relative; bottom: 450px; font-size: 0px; left: 100px; text-size- adjust:none;}} @media (max-width: 768px). {.fptext {animation: fadeout 30s ease forwards;animation-delay: 0s;padding:0px;-moz- animation:fadeout 30s ease forwards 0s infinite }} @keyframes fadeout{ from {font-size: 0px;} to {font-size: 45px;}} @media(max-width: 768px) {.textwidget>.fatext{ animation: bigger 30s ease forwards

CSS slideshow with fade in/out delay

由 情到浓时终转凉″ 提交于 2021-02-11 07:37:22
问题 I made an CSS slideshow with 3 images animated by keyframes that makes a fade in/out effect. So far, so well. But there's a problem with the animation on the second loop of the slideshow. Im going to explain my best: the first loop animation works perfectly, but once the first image come back again there's a fade to white on all the slides that I like to avoid. I don't understand why the first loop works perfectly and then the other loops have this fade to white issue. You can see this
订阅 css-animations