spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

css menu animation nothing happens


It's because the animation name is case sensitive, and also you have to prefix the transforms in your animation. If you do this:

@-webkit-keyframes ITEMHOVER {
  0% { -webkit-transform: scaleX(1); }
  25% { -webkit-transform: scaleX(0.90); }
  75% { -webkit-transform: scaleX(1.25); }
  100% { -webkit-transform: scaleX(1.20); }
}
@-moz-keyframes ITEMHOVER {
  0% { -moz-transform: scaleX(1); }
  25% { -moz-transform: scaleX(0.90); }
  75% { -moz-transform: scaleX(1.25); }
  100% { -moz-transform: scaleX(1.20); }
}
@-o-keyframes ITEMHOVER {
  0% { -o-transform: scaleX(1); }
  25% { -o-transform: scaleX(0.90); }
  75% { -o-transform: scaleX(1.25); }
  100% { -o-transform: scaleX(1.20); }
}
@keyframes ITEMHOVER {
  0% { transform: scaleX(1); }
  25% { transform: scaleX(0.90); }
  75% { transform: scaleX(1.25); }
  100% { transform: scaleX(1.20); }
}

.item:hover {
  -webkit-animation: ITEMHOVER 2s;
  -moz-animation: ITEMHOVER 2s;
  -o-animation: ITEMHOVER 2s;
  animation: ITEMHOVER 2s;
  color: #000000;
}

It will work.

NOTE: This was according to your fiddle. In your initial post, you were trying to animate width. Simply changing itemHover to ITEMHOVER would've done it.


Categories : CSS

Related to : css menu animation nothing happens
CSS3 Animation Delay longer than Duration breaks animation
This boils down to a timing issue. Initially the p has display:none; and opacity:0;. On hover the p has display:block; and opacity:1;, and then, after the delay, this is reset to display:none; and opacity:0; when the animation starts. By setting the hover p to have display:block; and animating only the opacity, then I almost get the desired result. To stop the animation from completing and setti

Categories : CSS
Can't clearInterval on animation
The problem is your usage of setInterval(), it will queue a lot of animations every 200ms so even after clearing the interval there are a lot of animations present in the animation queue. One easy solution is to clear the animation queue also var timeout; var d1 = $(".drum1"); function dani1() { d1.animate({ height: '150px', width: '150px', opacity: '0.4' }, "slow"); d1.anim

Categories : Javascript
How to get animation in android?
You have not mentioned which layout in your code you want to hide and bring another layout. But I will give you a general code which you can apply. First for the layout you want to hide initially, set android:visibility = "gone" and in your activity while animating use below layoutYouHideInitially.setVisibility(View.VISIBLE); layoutYouHideInitially.animate().alpha(1).setDuration(500); layoutYouW

Categories : Android
RevealViewController with Different Animation
self.view.transform = CGAffineTransformMakeScale(.5, .5); then do what you want to the view i.e.: change background color etc. you can do all of this during the animation no worries copy and paste this code in your view controller don't forget target action link to recognizer in IB it looks pretty stellar actually! #import "ViewController.h" @interface ViewController () @property (strong, no

Categories : IOS
Animation issues with IOS 8.1
I have come across this and the answer is to do with the layout constraints. You need to change the constant properties of the layout constraints that affect the view you want to change. E.g. to change the width of a view with a width NSLayoutConstraint you would call constraint.constant = newWidth; then go ahead with your animation code. This is how I'm doing it and it works fine. EDIT: your an

Categories : IOS
Recently Add
Ignore CSS declaration on a specific control
Mark space for :after content non-breaking
2 inline images - 1 centered and 1 right using Bootstrap
Bootstrap - three sibling col divs, is this layout possible?
jquery mobile-vertically center two lines of button text
Change footer content in magento
CSS help - Shopify Blockshop theme collection page alt image hover changes
SVG filter feGaussianBlur in percentage
How to remove arrow from select element
how to align sub tags in parent tag
Attribute name "onclick" associated with an element type "Label" must be followed by the ' = ' character
CSS : Fixing up/down arrow CSS
Flip horizontally only one background image
Recent posts in footer widget not aligning
Change fielderror style for a specific form only
Creating disable opacity bootstrap 3?
How to display two nav bars in bootstrap while browsing through mobile and displaying content on it without use of button that bootstrap provides
Why css & image get distorted on URL rewrite in asp.net?
changing css class variables
CSS Scrolling Background Image
Custom Checkbox Not Working in Chrome on Windows
Facebook like box showing only partially
Gulp sass output paths for css.map files Google Chrome can't resolve path
background-image not displaying
Undefined variable in SASS, even though the variable is defined above
css - start new line when we reach width
How to create a horizontal calendar with nested lists?
See current column category used in Bootstrap 3
CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?
Responsive Centered Image: Vertical Resizing - NOT
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.