jquery,css,wordpress,image,transition
The css transition on your images is not working because you don't actually resize the images. Try adding a class (instead of switching the parent's id) so that you can do something like this: #gallery { ... position: relative; } #gallery img { ... -webkit-transition: all ease 0.5s; transition: all...
jquery,css,colors,css-transitions,transition
.my-image { width : 100px; /* only for test purposes can be removed */ height : 100px; /* only for test purposes can be removed */ transition : 2s; background-color : transparent; /* initialize the default color without mouseover */ } .my-image:hover { background-color : red; } <img src="http://lavinbylycka.com/images/logobrand.png"...
You need to define a link as display: inline-block, and add prefixes. CSS: .link { display: inline-block; } .link:hover { -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */ transform: scale(1.1); } FIDDLE...
html,css,website,transition,fadein
What I would do is bind a method to your window.scroll event, and when that scroll hits specific values you'll trigger specific animations functions that either animate the contents on screen probably via jQuery, or add classes with predefined css animations attached. Step 1, something like this) $(document).ready(function() { var...
This was a bug on my Chrome browser. The code worked as expected on IE11, Firefox and Chrome Canary. Other users could not replicate the bug on their versions of Chrome.
You can't animate auto property instead try something like this $(function() { setTimeout(function() { $('#logo_img').addClass('tiny'); }, 1000); }); #logo_img { height: 55px; width: 55px; background-color: red; margin-left: calc(50% - 55px); margin-right: auto; display: block; transition: all 1s ease-in-out; } #logo_img.tiny { height: 45px; margin-left: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="logo_img"></section>...
html,css,css-transitions,transition
Here's a working pen. A summary of my changes: Added text-align: center on .testtransition to keep the image centered Added width, height, and padding to the animation to keep the image centered throughout the animation Removed the width parameter from the img tag to keep things simple :) ...
html,css,css3,transition,slide
You can do this using radio buttons and sibling CSS selectors. The basic idea is to put the buttons and the slides in the same container so that they are siblings. The radio buttons might each look something like: <label class="radiolabel b1" for="b1">•</label> <input type="radio" id="b1" name="nav-buttons" class="button-radio" /> The...
I've used the pseudo effect :after to achieve a pure css solution for a similar functionality, although only really works with 'hovering' the element: input { outline: 0; border: none; width: 200px; border-bottom:1px solid gray; } div { position: relative; width: 200px; height: 20px; } div:after { content: ""; position:...
javascript,html,css,transition
of course you can do that , why not? for example we gonna do some margin changing to you'r logo with that. we make the default margin-top to -50px so the logo won't show on the page and then when the page completely loaded, were gonna use the jQuery to...
I solved my problem by using another plugin. Others in my situation might want to try http://responsiveslides.com for another plugin.
jquery,html,ipad,transition,blur
I found a solution here: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/ I added this: -webkit-transform: translateZ(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden; ...
html,css,hover,transition,state
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript. Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3...
why is the same class used over and over ? There is no practical reason to that is expressed in this code. There might be some JavaScript that enables and disables rules in the CSS dynamically, but you haven't included it. does the order matter ? Not when different...
Using the back button returns you to the state of the previous page right before you left it (in this case, completely faded out), at least that's how I understand it. Feel free to correct me if I'm wrong though. In any case, I think repainting the DOM would solve...
javascript,animation,svg,d3.js,transition
You should just add a line .ease("linear") after .duration(7500), and you should be all set. This is documentation on ease(), but you should read all that is related to transitions, while you ate at it... Here is also a test example for various possibilities related to ease(): ...
You can use animation keyframes *{box-sizing: border-box} :root{width: 100vw; height: 100vh} body{height: 100%} menu{ position: fixed; top: 0; left: 0; width: 200px; background: #333; height: 100%; padding: 20px 0; text-align: center } menu li{ list-style: none; color: white; opacity: 0; display: block; text-align: left; width: 100px; margin: 10px auto; transform:...
javascript,css,animation,transition,banner
OK, so I've had a good look at your code. I've created a fix for the transition issue by setting z-index in the fadeOut/fadeIn functions to ensure that the correct element is visible on top regardless of stacking. Furthermore, there is another bug. The animation loop continues regardless of user...
javascript,html,css,transition
You cannot use display: none to animate elements into view. However, you can update your expand function to the change the class from open to close like so: JavaScript Change: function expand () { infoContent.className = infoContent.className === 'open' ? 'close' : 'open'; } And then apply the CSS animation...
javascript,image,d3.js,transition
The answer is "it depends". You can use margins, padding, transform, left/right/top/bottom (in case of absolute positioning), etc. Here's an example (demo available) with margins: d3.select('#photo').append('img') .attr('src','http://google.com/images/srpr/logo11w.png') .attr('width',100) .attr('height',50) .transition() .duration(3000) // 3 seconds .style('margin-left', '200px') .style('margin-top', '200px'); ...
Self answered fix: Interestingly enough, there was some questionable code during the first prepareForSegue that caused the navigationController to turn to nil. I removed the code, but for future reference-- if your self.navigationController turns nil then Segues will go vertical. If it is intact, they will be horizontal. Also, while...
Flexbox spec author here. Originally, the spec mandated that you couldn't transition to/from flex:0. This is because there was a huge difference between 0 and non-zero 'flex-grow' values. For example, if your flex container is 1000px wide and your flex item is 100px wide, flex:0 keeps it at 100px while...
jquery,transition,addclass,scrolltop,removeclass
First off, here's a fiddle with the thing working. I've remade the check that you were doing. I've used a function to determine if the div is on screen or not (I took it from here). Hope you don't mind. $(window).scroll(function () { if (isScrolledIntoView('#element')) { $('#element').removeClass('invisible').addClass('visible'); } else {...
javascript,css,progress-bar,transition
It is because of the way you are setting the transition properties. You need to apply the animation in either a timeout or requestAnimationFrame like so: function startProgressBar() { bar = document.getElementById("progressBar"); // assume that the bar should start at 50% bar.style.width = "50%"; requestAnimationFrame(function(){ // assume that bar should...
javascript,svg,d3.js,transition
Codepen of the solution is here. Here is animated screenshot: CODE WALKTHROUGH Data During simulation, it is necessary to keep data on what squares were already reached, or about to be reached. In this example this is done in one-dimensional array board. One-dimensional array was chosen over two-dimensional since D3...
javascript,css,image,joomla,transition
Do you want the hot air balloon to rise a single time, just after the page has loaded? You should be able to do this with css animation and @keyframes: HTML: <div class="hotairballoon"></div> CSS .hotairballoon { position:absolute; top: 0; left: 200px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,0,0,1); animation:...
just add transition is normal and hovered state it will return on original place nav ul ul { visibility: hidden; width: 116px; height: 126px; position: absolute; top: 63px; -webkit-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform 1s ease; -ms-transition: -ms-transform...
css,css3,scale,transition,transformation
Here's a pure css version of what you want. It transforms only during the transition. Not hard at all. Just use keyframes to specify what properties you want changed and when. The HTML <div class="childAnimated"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> And the CSS .child { border: .5em solid white;...
ios,objective-c,uiviewcontroller,sprite-kit,transition
Try implementing the loadView method on your custom ViewController, like so: override func loadView() { self.view = SKView(frame: CGRect(x: 0, y: 0, width: 320, height: 480)) } This is what Apple's documentation states: This is where subclasses should create their custom view hierarchy if they aren't using a nib. Should...
css,button,transition,effect,skew
You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent. Here is a working example Suppose you have below as you html, <div class="btn"> <button><div class="btn-text">Click</div></button> </div> If we skew the parent element by 20deg then we should skew the child element...
transition,slide,jssor,caption
't3' is for play out as well as 't2', but 't3' plays after 't' immediately. And you can set 'd3' to 3000 to specify the delay (3s). <div u=caption t="yourfadetransitionname" t3="yourfadetransitionname" d3="3000" ... Reference: http://www.jssor.com/development/slider-with-caption-jquery.html...
ajax,d3.js,transition,turbolinks
Looking at your comments, I think this will work: d3.selectAll('*').transition(); But the transitions will be destroyed when the svg/canvas is destroyed, as Lars Kotthoff said, so there's no need for this if you're destroying the svg/canvas....
I would consider using Spherical Linear Interpolation (slerp) on the rotations produced by gluLookAt (...). The GLM math library (C++) provides everything you need for this, including an implementation of LookAt. Very roughly, this is what a GLM-based implementation might look like: // Create quaternions from the rotation matrices produced...
ios,xcode,uinavigationcontroller,uinavigationbar,transition
If the LoginScene is the root view controller of the navigation controller, then you should be setting the nav controller as the window's root if I'm understanding correctly: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:UIScreen.mainScreen.bounds]; UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil]; self.window.rootViewController = [storyboard...
I'd suggest that you remove the transition on the dy and transform attribute. This updated fiddle may help you with that: http://jsfiddle.net/esy6wk8n/4/ The changes are all in your update function. var no_trans = svg; svg = svg.transition().duration(750); lp.transition() .duration(750) .attr("transform", "translate(" + this.x(data[0].jdate) + ")"); lu.transition() .duration(750) .attr("transform", "translate(" +...
javascript,css3,transition,polymer
the polymerlabs icon-transition element could work https://github.com/PolymerLabs/icon-transition...
Just replace width: 400px; with transform: scale(2,2) on :hover. img { width: 100%; max-width: 100%; } div { position: absolute; left: 20%; top: 20%; width: 250px; transition: all 2s ease-in-out; } div:hover { transform: scale(2,2) } <div> <a href="http://photobucket.com/images/cat" target="_blank"> <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/> </a> </div> ...
javascript,svg,d3.js,transition,gradient
If you were using solid color fills, it would be straightforward to transition them to gray and then back to color -- just use the d3 transition of the fill property instead of the fill-opacity and stroke-opacity properties. However, the colors in this case aren't actually associated with the elements...
java,android,numbers,transition
Hope this little demo using a ValueAnimator will inspire you to find an appropriate solution. You can specify the duration of the animation (see code) and even adjust the frame-rate by saying mAnimator.setFrameDelay(frameDelay);. By using animator.isRunning() or animator.isStarted() you can prevent double-click malfunction or other unwanted behaviour while the current...
javascript,angularjs,transition,ng-animate,ng-show
Its because of the max-height:9999px. When i changed the max-height:150px it worked as expected. Here is the fiddle: https://jsfiddle.net/0wcrcwxe/1/ ...
javascript,jquery,html,css,transition
You can do it with a JQuery like this: $(function() { var open=false; $('.menubar span').click(function(){ if(open==false){ $('.search').css('left','50px'); open=true; } else{ $('.search').css('left','-100px'); open=false; } }); }); .menu{ position:fixed; left:0; top:0; width:50px; height:100%; background:#222021; z-index:4; } .menubar{ width:50px; height:100%; color:white; font-family:arial; } .search{ position:absolute; left:-100px; top:0; width:100px; background:lightgrey; height:100%; -o-transition:.3s; -ms-transition:.3s;...
html,css,transition,background-size
You can't use keywords (such as cover) when using CSS animations for background-size. More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties Relevant text: background-size - yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are...
ios,uiviewcontroller,transition,modalviewcontroller,transitions
As I understand it, you're wanting to have the ViewController slide up from the bottom then have the background color change (transition) to a darker color of your choice? I'd probably use the alpha value of the background and animate it to become more opaque to achieve that effect. Here's...
The easiest way is to just do a toggle a class on the body tag. For example .sidebar-open: .wrapper, .sidebar { transform: translateX(0); transition: all .5s ease-in-out; } .sidebar-open .wrapper, .sidebar-open .sidebar { transform: translateX(-200px); } ...
Call this function to do some fade in kind of transition... function do_transition(){ $('#lone').fadeOut('slow', function() { $('#lone').html('New content in MyDiv ('+Math.random()+')') setTimeout(function() { $('#lone').fadeIn('slow'); }, 5000); }); } if you want to move your "lone" just change margin values of "lone" from JS... <head> <title>JavaScript Animation</title> <script type="text/javascript"> var imgObj...
css,animation,button,transition
You could use a box-shadow instead of a border and then animate the box-shadow and transform. The jitter occurs because everytime the border or margin changes, it has to redraw the page, which is very inefficient. It's better to animate properties that do not trigger a repaint (such as transform...
ios,swift,uiviewcontroller,transition
DetailedView is not a ViewController but you are forcing it to be one. Change the ! in as! DetailedView to as? DetailedView and the rest should speak for themselves. here's the code func animateTransition(transitionContext: UIViewControllerContextTransitioning) { // get reference to our fromView, toView and the container view that we should...
I think this is what you're looking for. The parent needed to be set to relative instead of absolute, so that it can contain the absolute child element which is created by the ::before. Position the child absolute right and animate the width instead of max-width, works. And no you...
html,css,web,transition,transformation
Add transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg); to .front. Demo Here * { margin: 0px; padding: 0px; } body { background: #000; } /*SeaseOutBack:cubic-bezier(0.175,0.885,0.320,1.275);*/ .wrapper { margin: 11% 32%; position: relative; border: 5px solid black; width: 390px; height: 360px; perspective: 800px; /*If u add some perspective to the container*/ } .card {...
The two different methods are instantiating two different view controllers. The segue instantiates the instance of NPViewController that you have in the storyboard, whereas when you do the push, you're pushing a plain UIViewController that you alloc init'd. The first few lines of your pan gesture recognizer's handler should look...
What you describe looks like a transition between two activities. You can use the new activity transition's API. Take a look here: https://developer.android.com/training/material/animations.html#Transitions Keep in mind the compatibility level is 21. It will only work on lollipop devices. If you want to be compatible below 21, you can try implementing...
android,animation,button,transition
So 1st you aren't using translateanimation properly. TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) So to move from its current location to a new location would be: TranslateAnimation(0, 'change in X value you want', 0, 'change in Y value you want') 2nd to make it come back you could...
transition,polymer,web-component
Just remove "section" outside your custom element then it's gonna work! <!--<section>--> <x-el onclick="stuff(1);"></x-el> <!--</section>--> Check this: http://codepen.io/anon/pen/yygydK Goodluck...
android,transactions,fragment,transition,android-transitions
The problem is, that addSharedElement does NOT set the transaction name of the view! So in my example I would have to set it with following code: ViewCompat.setTransitionName(view.findViewById(R.id.ivLogo1), "1"); ViewCompat.setTransitionName(view.findViewById(R.id.ivLogo2), "2"); BEFORE I add this views to the FragmentTransaction... Afterwards following works just fine and as expected: ft.addSharedElement(view.findViewById(R.id.ivLogo1), "1"); ft.addSharedElement(view.findViewById(R.id.ivLogo2),...
html5,css3,twitter-bootstrap,transition
The backface-visibility : hidden doesn't work because it needs transform-style: preserve-3d in the element itself, not in the parent .flippable > figure { display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: all ease-in-out 0.5s; transform-style: preserve-3d; } and now this is useless: .flippable.flipped .front { visibility: hidden;...
Are you looking to do something like this? var data = [[{ x: 10, y: 10, r: 10, color: "red" }], [{ x: 70, y: 70, r: 15, color: "green" }], [{ x: 130, y: 130, r: 20, color: "blue" }]]; ... var circles = canvas.selectAll("circle") .data(data[0]); circles .enter() .append("circle")...
animation,javafx,transition,command-pattern,graph-drawing
The solution below uses Itachi's suggestion of providing an onFinished handler to move to a node to a new (random) location after we get to the next location. It could probably be made more efficient (and simpler to understand) by re-using a single Transition rather than using recursion within the...
ios,swift,uiview,transition,uiviewanimation
You are still trying to translate in the X Coordinate. Try doing the translation in the Y coordinate. let offScreenUp = CGAffineTransformMakeTranslation(0,container.frame.height) let offScreenDown = CGAffineTransformMakeTranslation(0,-container.frame.height) ...
In principle this is the same as transitioning pie charts, where you need a custom tween function to get the animation right. For this it is necessary to save the original value in a separate attribute -- in your case you can do the same thing. Attributes are set when...
css,animation,transform,transition,social
I've found what I wanted to (it was a css rule problem). Here is the updated fiddle : updated fiddle Here is the code : .cover { right: 0; height: 100%; width: 110px; background: red; position: fixed; } .off-canvas-buttons { top: 10%; height: auto; right: 55px; width: 100px; text-align: center;...
java,javafx,raspberry-pi,transition,javafx-8
Animations do work in the Raspberry Pi, for sure. The problem with your animation is it's using a rotation over the Y axis of the image, which means it is rotated "out" of the screen. And for that you need 3D rendering capabilities... On the Raspberry Pi and other embedded...
Display is not an animatable property. Try changing the form height or opacity. For example: form { -webkit-transition: opacity 1s; transition: opacity 1s; } form.hidden { opacity: 0; } Then just use JavaScript to toggle the class....
css,css3,css-transitions,transition
You could pass a time span parameter to the show() function. Like show(1000). Here is a snippet var isNavExpanded = false; $(document).ready(function() { //nothing initializeAppUIComponents(); }); function initializeAppUIComponents() { navMenuChangeStateHandler(false); $('#btnExpandNav').click(function() { navMenuChangeStateHandler(); setSubMenuItems(); }); } function navMenuChangeStateHandler(specificState) { if (specificState != null) isNavExpanded = !specificState; if (isNavExpanded) $('#mainNavCol >...
html5,canvas,transition,gradient,smooth
Use a s-slope based gradient which could be defined using an ease-in-out function. This way the transition between flat and linear is smoothed out. You may need to compensate a little on the width as initial and final values are closer to the flat values than in the linear approach....
ios,objective-c,uiviewcontroller,transition,skscene
The view property is managed by the UIViewController and represents the root view. You cannot simply assign your own view at any point. Option 1 If you wish to replace the view property with your own view you can override UIViewController's loadView method and assign the view there. It is...
javascript,css,transform,transition,translate
if anyone in the future is curious about how I got past this, I switched from vanilla JavaScript to jQuery for my div-movements, and I changed from translating the divs' y position to animating their margin-top values. Essentially changing from this: var single = document.createElement('div'); single.setAttribute('class', 'single'); single.style.left = singleX...
javascript,jquery,html,css,transition
Use .toggle() method: $('span.nav-button').click(function(){ $(".burgermenu").toggle(); }); Just use the toggle method...
animation,javafx,transition,javafx-8,timeline
The reason why you get all the circles showing at the same time is that KeyFrame duration is actually not the duration of the frame, but the absolute duration from the start of the animation. So you are specifying all of your transitions to happen between 0s and 3s. To...
Inside the onRecieve method put the following: Intent scheduledIntent = new Intent(context, YourScheduledActivity.class); scheduledIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); context.startActivity(scheduledIntent); And inside the onCreate method of YourScheduledActivity, we do transition....
android,android-fragments,nullpointerexception,transition
So it turns out that I do not understand FragmentManager's backstack yet. What I was trying to do could be done without backstack. It is simple. For Transition, I need to replace the fragment with some other fragment, otherwise it is not a transition. private void showFragment() { Fragment fragment...
jquery,css3,animation,transition,effect
This is most likely happening because you are not giving the browser time to update between adding the translateX(100%) and then changing it to translateX(0%). This causes it to only run the translateX(0%) with animation (causing it to come from the left). If you instead move the translateX(0%) to a...
javascript,css,rotation,transform,transition
Your example adds and removes the class that applies the transformation, which has the effect of applying the transformation when the class is added, and then undoing it when the class is removed, hence the reversal of the rotation on the second click. To increment the rotation each time, you...
java,javafx,transition,equivalent,interpolate
I'd use java.util.Timer for that. You can give it a TimerTask (basically a Runnable) that it will execute every x ms (its period). It also runs on a background thread, which I assume is what you meant with asynchronously? API: http://docs.oracle.com/javase/8/docs/api/java/util/Timer.html...
css,angularjs,animation,transition,slide
You only need two states: Shown Hidden Let the base slide class define the state for shown (30px from bottom): .slide { background-color: white; width: 90px; height: 30px; position: absolute; bottom: 30px; z-index: 5; transition: 1s ease bottom !important; display: block !important; } When the expression used in the ng-show...
media-queries,transition,css-animations
Ok finally made it work after playing around and researching a bit. Once I learned to control animation with delays on both sides it became easier. .wrapper { width: 500px; background-color: #0C6; } .nav { background-color: #69C; } .logo { height: 0px; background-color: #FC3; visibility: hidden; opacity: 0; -webkit-transition: visibility...
css,safari,mobile-safari,css-transitions,transition
The issue appears to be caused by a syntax error in your externally loaded CSS. In this file, you will find this code. .mark-object .overlay{-webkit-transition:background-color, 200ms, ease;-moz-transition:background-color, 200ms, ease;-ms-transition:background-color, 200ms, ease;-o-transition:background-color, 200ms, ease;transition:background-color, 200ms, ease; Which looks like this beautified. .mark-object .overlay { -webkit-transition: background-color, 200ms, ease; -moz-transition: background-color, 200ms,...
html,css,css3,hover,transition
Ok, this is by far not a perfect solution, but it demonstrates the principle behind what I'm doing. This is tough because CSS doesn't give us control over individual characters. The easiest way to do this is to make the text itself transparent and then use a CSS3 animation to...
uiviewcontroller,segue,transition,modalviewcontroller
Disclaimer: This is just an idea of something you could do. Your situation sounds very specific and custom segue's can get very complex very fast. So this code might not do exactly what you need it to. This offers an insight into how I've solved similar problems in the past....
css,css3,rotation,transition,keyframe
Here is the answer i am pretty sure http://codepen.io/anon/pen/DzFyr basically I removed all the references to the "unhovered" state in the css and the javascript... And in the "click toggle" part of your js, I made sure that the "hovered" class is removed before the "clicked" class is toggled. I...
You can define view transitions in $ionicConfigProvider, but you should update to Beta 14.
javafx,transition,move,translate,keyevent
Fixed code import javafx.animation.TranslateTransition; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.paint.Color; import javafx.stage.Stage; import javafx.util.Duration; public class ControlTranslateImage extends Application { final int STEP_SIZE = 64; final Duration DURATION = Duration.millis(500); Group player; public static void main(String[] args) { launch(args); } @Override public void start(Stage...
Copying the necessary parts out of the website, this is what you need CSS: .zoom.visible > img { -webkit-animation-duration: 30s; animation-duration: 30s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: move; animation-name: move; animation-direction: alternate; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; -o-animation-direction: alternate; -ms-transform-origin: middle center;...
element.style.left returns target value of left property, you need to use getComputedStyle to get current style value. I prepared simple fiddle to show how to get current style values using jQuery and VanillaJS. http://jsfiddle.net/zg69gdh9/2/...
My way — https://jsfiddle.net/sergdenisov/qgyeay0v/10/: HTML: <div class="wrapper"> <div class="num" rel="1">1</div> <div class="num" rel="2">2</div> <div class="num" rel="3">3</div> <div class="num" rel="4">4</div> <div class="num" rel="5">5</div> </div> <div class="wrapper"> <div class="wrapper__item wrapper__item_shown"> <div class="box"></div> </div> <div class="wrapper__item wrapper__item_shown"> <div...
Percentage + auto will work in some cases but not all. The cover value automatically sets either width OR height to 100% so that the other dimension fits or overflows the container while maintaining aspect ratio. With percentage + auto you need to figure out which side to fit yourself:...
ios,animation,keyboard,transition,lag
I found reason by myself. that because of shadow. i added shadow for each button, after remove shadow, the lag didn't appear anymore. so anyone suggest some better way to add shadow to button without laggy? this is my way to add shadow to button: button.layer.masksToBounds = false button.layer.shadowColor =...
display block/none does not allow any transition to run. You must use visibility and opacity(for cross browser support). So your code would look like this: .lightbox { display: block; visibility: hidden; opacity: 0; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); transition:all...
Try starting the lines from outside the svg <div class="blok"> <svg width="200" height="100"> <line class="left" x1="0" y1="-5" x2="0" y2="-100"/> <line class="bottom" x1="-205" y1="100" x2="0" y2="100"/> <line class="right" x1="200" y1="105" x2="200" y2="205"/> <line class="top" x1="205" y1="0" x2="400" y2="0"/> </svg> </div> http://jsfiddle.net/shedali/vr8xj27n/...
css,css3,css-selectors,css-transitions,transition
I have to admit that your question is challenging ! My proposed solution: button { width: 100px; height: 50px; color: white; background-color: green; transition: background-color 2s; } button:hover { background-color: blue; } button:active { /* background-color: red; */ -webkit-animation: activate 0s 0s forwards; animation: activate 0s 0s forwards; } @-webkit-keyframes...
The trick is to understand how to get two images too overlap. I have a working copy of my solution attached. The method I use relies on absolute positioning. This allows the elements to go over each other. Once this is done I just simply re size my containers and...
Just position the .test element as relative and the :before to right: 0;. .test{ float:left; position: relative; } .test:before{ content: no-close-quote; border-top: 40px solid rgba(0, 0, 0, 0); border-left: 0px solid rgba(0, 0, 0, 0); border-right: 18px solid #E75757; float: right; right: 0; position: absolute; } Demo...
css3,animation,transform,css-transitions,transition
Saw your post on CodeMentor. The issue is that every time the value changes, it stops the transition that is currently happening and starts another of the same (long) duration. If this is done in rapid succession, it doesn't look like it's doing much of anything because it is trying...
javascript,jquery,transition,jquery-transit
I believe the callback is firing at the correct time (after 1000 milliseconds) the problem is that the transition animation isn't working. Changing to 'height': 'auto' on the shrinking transition seems to achieve the effect you are after. Though I can't say I really know why....
javascript,html,d3.js,transition
You can group the transitions of the text element and offsetting the % sign in the tween function. textInst.transition() .duration(750) .ease('linear') .style("fill", determineForegroundColor()) .tween('text', function() { var ip = d3.interpolate(oldValue, replacementValue); return function(t) { this.textContent = format(ip(t)); symbolInst .style("fill", determineForegroundColor()) .attr("dx", 51 + ( textInst.node().getBBox().width / 2)); }; }); Here's...
css,twitter-bootstrap,layout,transition
CSS border attributes (like on .rotate-img-bg1 and .rotate-img-bg2) are outset from the element, meaning that they affect page layout. A quick solution would be instead of using border: none; on those elements, use border: 1px solid transparent; instead. Codepen: http://codepen.io/maxlaumeister/pen/MwQBQQ...
css,css3,background-image,transition,background-size
just use transform, scale. so just instead of setting the bg image to 160% use transform:scale(1.5); some information about the transform css property you can find here to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger...
html,css,scroll,syntax,transition
First off you need to close your .right-menu class with a }. For effects and animations check out w3schools: http://www.w3schools.com/css/css3_transitions.asp - transistion property http://www.w3schools.com/css/css3_animations.asp - animations Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto. To prevent scrolling of the body do body {overflow:hidden} For sliding...