FAQ Database Discussion Community


Problems with transition on flex: 0, but still working on flex: .0001?

css,transition,flexbox,value
While working on a little project, I stumbled into having to transition from flex: 1to flex: 0. It took me a while to understand that it was only for this that the result was broken. After testing a bit I've found out that flex is transitionable, but not if one...

AngularJs animation for ng-show faster when showing than hiding

javascript,angularjs,transition,ng-animate,ng-show
I have an Angular (1.3.14) app (shown below) which is supposed to animate the ng-show when you click the link. I expect it to expand / contract at the same speed, but I cannot get it to work correctly. I also don't know why the height change is waiting until...

CSS background-color transition not working in specific browsers (desktop + mobile)

css,safari,mobile-safari,css-transitions,transition
I have this SCSS that, in theory, should transition the background color smoothly, but it is not smooth in specific browsers. See this codepen for a demo: http://codepen.io/ahegyi/pen/Wvjajy (Click on the photo or note text to activate the transition. It's more obvious if you click on the text.) .overlay {...

Social bar css translate

css,animation,transform,transition,social
I would like to have a social bar on the right, and scrolling with the page. This is ok, but I would like to add some behaviors : if you hover the facebook logo, the logo moves to the left, and shows the like button. And same behavior for twitter....

Width transition on a absolute positioned unordered list

css,css3,css-transitions,transition
I want to animate the width of a unordered list. The width is determined whether the texts associated with a icon (in the fiddle represented by some characters) is displayed or not. Basically if the spans are shown the width of the menu is increased - i want to animate...

Chaining (syncing) dependant transitions using d3

javascript,html,d3.js,transition
I'm writing a widget that displays a value with the ability to animate to the new value when required. Part of the number display is the ability to display a symbol. For example the percentage symbol (%). I've been able to code the transitions correctly using d3 and color. The...

d3.js. How to animate throughout all data set from start to end?

d3.js,transition
I draw a circle and want to run it transition from first to the last point of data set. But can't understand how to do it. Code available here. How can i do it? What is the best practice for this kind of animation? var data = [[{ x: 10,...

How do I make two floating divs smoothly follows each other when moving using transition?

css,transition,sidebar,smooth
I need some help with a little bit of CSS coding. What I am currently attempting to make is a sidebar that slides in (like on mobile pages) but instead of making the position absolute I have made the two divs float inside a wrapper. My explaining skills are not...

Transition effect on expanding UL [closed]

javascript,html,css,transition
How do i add a transition effect on this expanding list? <div class="container"> <div class="outerBG"> <div class="innerBG"> <h2 class="info">&#10148; Show text</h2> <ul id="infoContent" style="display:none"> <li>TEST 1 TEST 1 TEST 1 TEST 1</li> <li>TEST 2 TEST 2 TEST 2 TEST 2</li> </ul> </div> </div> </div> I'm using JavaScript to toggle the...

Input transition

html,css,transition
I try to animate my search button. When you click on it, it should expand and slide to the side. The animation is no problem in css, but in front of the search bar is a div, which does not follow the expanding search bar. <form> <div class="test"></div> <input type="search"...

Starting a transition on specific time in Android?

android,imageview,transition
Hey guys I've made an transition for an imageview and I want to play it when the time in Android Phone is for example 10:00 AM, then how can I do this? I tried to do this with AlarmManager but it's of no use! It's not getting work done, is...

Card flip program in HTML not fliping properly

html,css,web,transition,transformation
Link to the Card Flip program! The card do get flipped but then when it turns over there is an error for a split second which disappears immediately.How am i supposed to remove that error? I guess the error is mostly occuring when the backface-visibility:hidden; is used. *{margin:0px; padding:0px; }...

Reverse transition on link effect

css,hyperlink,transition
Okay, I'm trying to get a specific effect for my links. I want my hyperlinks to have one color for text and another color for an underline. Then on hover, I want the colors to invert using an animation. So far, I've been able to use just CSS to transition...

SVG line stays in screen after leaving mouse

css,svg,transition
I've made a div, with 4 svg lines in it. When hovering the div, the x- and y-axis changes using transition and transform. Everything works fine, got it working but when i leave the mouse from the hover field, the svg line stays just a couple pixels in screen. Check...

background-size transition on hover causes chrome to “shake” background image

css,css3,background-image,transition,background-size
I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have...

Trigger transition on child element, when hovering parent

html,css3,transition
I have a menu, which I want to animate using css3. When you hover the main-menu, I want to slide in the sub-menu. However I don't know where to put the transition property, to make it animate both ways. Here is an example of it working correctly, but only on...

Collision detection in transition

javascript,transition
I have two objects var player = document.getElementById("player"); var ahead= document.getElementById("follower"); document.addEventListener("click", move_player); function move_player(e) { x_click = e.clientX; y_click = e.clientY; player.style.transition = "all 0.5s" if (x_click < canvas.clientWidth && y_click < canvas.clientHeight){ player.style.left = x_click - player.clientWidth/2 + "px"; player.style.top = y_click - player.clientHeight/2 + "px"; } var...

Can't understand this CSS code

html,css,transform,transition
I've bought an HTML/CSS template. As I was going through the CSS files, I saw this block of code that confused me a lot. .team-member .details, .team-member .details { -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }...

NullPointerException when using setExitTransition to Fragment

android,android-fragments,nullpointerexception,transition
I am trying to animate my fragment's enter and exit. setEnterTransition works fine, but if I use setExitTransition, it throws a nullPointerException. If I use setReturnTransition, it doesn't show any animation. Here's what I have. private void showFragment() { Fragment fragment = JoinGroupFragment.newInstance(); FragmentTransaction ft = getFragmentManager().beginTransaction() .add(R.id.fragment_container, fragment, JOIN_GROUP_FRAGMENT_TAG);...

Buttons, scroll locking, transitions and unusual code error

html,css,scroll,syntax,transition
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which...

CSS transform rotate in the same direction each time

javascript,css,rotation,transform,transition
I'm wanting to make an element on a web page rotate 360 degrees anticlockwise each time a button is clicked. I've found some example code showing how to do this but the only issue is that currently it rotates in alternating directions. Is there a simple way to ensure that...

How to make smooth media-query transition back and forth?

media-queries,transition,css-animations
I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried...

Transition partition arcs back to original angles

d3.js,transition
How can I transition arc angles, initially defined by d3.svg.arc(), back to their original values when using d3.layout.partition? I am trying to store the initial startAngle and endAngle values d.x and d.dx somewhere so that I can transition back to them at a later state. However, I do not know:...

Android: How to animate several views from different activities after finish()?

android,xml,transition
I would like to have a scaling-animation of the view of the new activity parallel to the moving buttons and ImageView of the old activity in different directions that are moving out of the screen. overridependingtransition() needs xml resources but afaik you can't code e.g. scaling for individual views. And...

How to use pushViewController in interaction transition with panGestureRecoginizer

ios,transition,interactive
I try to implement a simple interaction transition which uses Pan Gesture. It looks like in this video. I have sample project working with storyboard. The project is in this link. However, if I replace "performSegueWithIdentifier..."in line 50 of ViewController with "pushViewController:controller" which is commented out in line 51. the...

How to use javascript to transition a property from a set attribute to a new attribute

javascript,css,progress-bar,transition
I am working an a project which requires a custom progress bar using only html, css, and javascript. I want to be able to set an initial condition on the progress bar and have it start at the proper place. Example: I have a timestamp for when something started and...

Android studio - creating transition/animation for an ImageView using Interpolator(s)

android,animation,button,transition
I was wondering if someone could help me with my code. Down bellow is the code that I found on the internet, and adjust it a bit. So for a button is set a onClickListener method, that includes two methods, which are used when the button is pressed. So the...

Error with custom transition on loading UIView in Swift

ios,swift,uiviewcontroller,transition
I have UiViewcontroller which had multiple elements. When clicking the accessoryButtonType on a cell it should open a window with a custom transition, however after creating the code for the transition my UIViewController won't load at all. by adding breakpoints it crashes after my viewDidLoad method; here is the first...

Create div transition like Spotify

javascript,jquery,html,css,transition
I would like to have some help about the transition of a div in CSS or JavaScript. I have a <div> with dispay:none;. With some JS, i change the display option on display:block. All is working correctly. But i would like to know how to make a transition when the...

JavaFX Transition Equivalent

java,javafx,transition,equivalent,interpolate
I have a non-gui application where I want to asynchronously interpolate some data over time. I had a look at the JavaFX Transition API and it looked ideal. However, for the transitions API to work it has to be run as part of a JavaFX application context - which I...

CSS3 transform transition stutters when value changes frequently (not performance related)

css3,animation,transform,css-transitions,transition
I'm currently building a compass app in HTML and CSS in a PhoneGap project with the DeviceOrientation plugin to get the compass heading. I created a jsbin to emulate the heading change. The problem I'm having is that when the value changes frequently (every 200 ms), the CSS transition stutters...

Transition animation need some CSS

html,css,css-transitions,transition
I am trying to make a page load transition effective div. This is my DEMO FULL PAGE full page from codepen.io and also this is example page with code DEMO WITH CODE If you open the demo full page then you can see there is a one image and this...

transitioning rotated axis labels with D3

d3.js,transition,axis-labels
I'm trying to create a graph that updates as new values are coming in. In order for the labels on the X axis to be readable I decided to rotate them slightly, so they don't overlap. When there's a new value, it's being drawn in the graph, then the path...

javafx using translatetransition and keyevent to move image around screen

javafx,transition,move,translate,keyevent
I am trying to make a simple tile based movement system so that when a direction is pressed a translate transition is played to smoothly move the character one tile over. The problem I am running into is that when I play the animation the image does the transition fine...

Why is transform:scale not kept on :hover?

css,transition
I am using this CSS: .link { transition: all .2s ease-in-out; } .link:hover { transform: scale(1.1); } When I hover the text, it's scaled to 110% as expected, but as soon as the transition is finished, it scales back to 100% even though the mouse pointer is still on the...

CSS: How to scale an image from the center instead of top-left

css,scale,center,transition
So my problem is that I have an image and I set its CSS to have a max-width: 100% which scales it at lower resolutions ( as will be seen in the fiddle below ). What I want is for the transition to take effect from the center of the...

Fragment Transactions with transition - Unique transitionNames are required

android,transactions,fragment,transition,android-transitions
I want to go from a list view to the detail view and therefore, I use following OnClickListener in my list: @Override public void onClick(View view) { Bet bet = (Bet)view.getTag(); FragmentManager fm = getActivity().getSupportFragmentManager(); BetDetailFragment f = BetDetailFragment.create(bet); String tag = f.getClass().getName(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move));...

Transition between decimal or double numbers

java,android,numbers,transition
Imagine a number 10, then after user clicks a button it changes to 100. But how to make an efficient transition 10 -> 100, that will display values like 12, 15, 18, ..., 97, 100 over 1 second. I've seen something like that in "Cookie clicker" but couldn't find anything...

How do I slide between two images on mouse over? [closed]

jquery,image,transition
How can I create a section contaiinng 2 images side by side which will expand one of the images to full width when hovering over it. i.e when I hover over the left hand side image the image will expand to the right to display the full image and cover...

CSS margin-left transition not working

css,margin,transition
I'm trying to do a transition from the center to left and reduce the height of an image. The height transition is working fine, but the margin just teleports to the left instead of animating. this is my code: #logo_img { height: 55px; width: 55px; background-color: red; margin-left: auto; margin-right:...

IOS: Transition with modal ViewContorller

ios,uiviewcontroller,transition,modalviewcontroller,transitions
I have custom action sheet that I create as VC. I present it with 'overCurrentContex' with the code [self presentViewContoller:myVC animated:YES completion:nil]; I need to add dark background to it. I added it with code self.view.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5]; But as I present it modally it slides from the...

Transition for js height change

javascript,transition
Hey guys I hope you can help me with my following problem. Here is the relevant fragment of the js-code : var layone = document.getElementById('lone'); ... if(layone && layone.style) { layone.style.height = 'auto'; layone.style.width = '120%'; layone.style.marginLeft = '-40px'; } ... Now I want to give it a smooth transition....

Menu transition in websites CSS

html,css,transition
I have started wokring on the template http://irontemplates.com/wp-demos/lush-classical/ I recently saw the site http://beeshoney.jp/culture/. I would like to achieve the menu transition as this. I am a beginner to web designing. Kindly help me to understand the concept and get it done. Please. In my template: they have used right...

How to display a smoother gradient in HTML5 canvas?

html5,canvas,transition,gradient,smooth
I have a html5 canvas in my web page. I have only put an image and a gradient in it. Canvas uses thic JS code to draw itself: var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.clearRect ( 0 , 0 , canvas.width, canvas.height ); var img = document.getElementById("slika"); ctx.drawImage(img,...

d3js: How to stop all transitions?

ajax,d3.js,transition,turbolinks
I have a web-application with d3js and turbolinks (ajax navigation). Some of my pages contains a long-run transitions (over 100s), so when a part of the page was being reloaded with AJAX all the transitions from previous page are still running. How can I completely remove all the transitions from...

White slide transition with CSS and HTML

html,css,css3,transition,slide
I'm just wondering how to make an animation to slide to another page when I click my buttons on the right of my website.I want the header and footer that is in black to stay in tact but when a button is clicked on the right I want the white...

Moving button pushing content

css,animation,button,transition
So I’m doing CSS, and I’ve started styling my inputs & buttons. I have a set-up where the bottom border of the button is wider, and clicking the button shortens the border and moves the button downwards, creating a pseudo-3d “push” effect. The problem is that when I press down...

CSS: Skew a buttons border, not the text

css,button,transition,effect,skew
I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is. I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML...

Hiding/Adding element with jquery and transitioning the rest? (maybe with css?)

jquery,css,css3,transition
I'm not sure if this is possible. What I have today are 5 DIV's and after clicking a number above them, the jQuery will check for the number clicked and fadeIn() or fadeOut() the number of boxes. What I want to do is that when the boxes are moving around...

Lightbox with transition

css,css3,transition,lightbox
I wanted to do a smooth transition of a fullscreen lightbox, my actual code is <a href="#_" class="lightbox" id="img1"> <img src="images/photo.jpg"> </a> And my style: .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width:...

Jssor slide out each caption

transition,slide,jssor,caption
I downloaded and used Jssor slide from this source : http://www.jssor.com/demos/introduction-slider.html And how can I slide each caption in a slide. Ex : in slide 1, caption A fade in, then caption A fade out after 3s and caption B fade in with position is same caption A....

applying a transition to one node at time in a group in javafx

animation,javafx,transition,javafx-8,timeline
I'm trying to fade-in one object at a time in javafx. I've tried to use a for loop to loop through the nodes of a group but all the nodes in a group seem to be displayed at the same time instead of being faded-in one at time. i just...

Ease effect when Page loaded

javascript,html,css,transition
I want my logo to have the following saturation effect with ease-out once the page loaded. Is this possible? Or does it only works with "hover"? Here is my code: /* CSS*/ #logo { -moz-transition: all 7s ease-out; -o-transition: all 7s ease-out; -webkit-transition: all 7s ease-out; -ms-transition: all 7s ease-out;...

JQuery FadeIn with every 2nd click

javascript,jquery,html,css,transition
I'm trying to create a Burgermenu, an easy dropdown without any animations. After this I tried to let this dropdown fade in on click with the following script: <script> $('span.nav-button').click(function(){ console.log("information: click!"); $(".burgermenu").fadeIn(500); }); </script> Because of this I can no longer close the menu, the menu tries now to...

CSS 3 Transitions - Flickering Content with Bootstrap 3.2

html5,css3,twitter-bootstrap,transition
I am experiencing a strange flickering effect when attempting to use bootstrap 3.2 and css3 transitions to simulate a horizontal flipping effect. The flipping happens but the content on the back side of the "Card" flickers rapidly during the transition. I have included a JSFiddle of the problem. This is...