Transition doesn't work


#1

I'm trying to clone the style from the example but the transition does not work, even if I added the -webkit-.
(I am suing Safari and it's working on the website https://threadly-rails.herokuapp.com/ transition)

Do I need to write a JS in this case? Thanks.

	<%= form_for @new_post do |f| %>
        	<%= f.text_field :comment, placeholder: "share your thoughts" %>
        	<%= f.button "post", class: "btn" %>
        <% end %>

form input[type=text] {
background:#f0f0f0;
border:none;
border-left:2px solid #fff;
font-size:36px;
font-family:Montserrat, sans-serif;
transition:background 2s border-left 2s;
-webkit-transition:background 2s border-left 2s;
padding:20px;
}

form input[type=text]:focus {
background:#fff;
border-left:2px solid #000;
box-shadow:none;
outline:none;
transition:background 2s border-left 2s;
-webkit-transition:background 2s border-left 2s;
}

button.btn,.btn {
background:transparent;
border:none;
color:#00f28f;
cursor:pointer;
font-size:36px;
transition:background 2s color 1s;
-webkit-transition:background 2s color 1s;
padding:20px 24px;
}

button.btn:hover,.btn:hover {
background:#00f28f;
color:#fff;
transition:background 2s color 1s;
}

#2

Hi @bitrockstar88319,

You won't need to use JavaScript to change the background color of the button :slight_smile:

It looks to me like you're missing a comma (,) between transition properties:

.selector {
  transition: opacity .5s, border 1s;
}

Also, there's no need for -webkit- on CSS transitions, transition is supported without the browser prefix now :slight_smile:


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.