background-color transition does not work in mobile Safari

I'm working on a mobile interface for a client where I want to fold open parts of a form. The folding effect works perfectly, but for some reason the transition on the background-color does not work in mobile Safari.
In Chrome and Safari on my mac it looks great, but on my iPhone the rotation of the div completes smoothly and then the background-color changes instantly.

Anyone any ideas?

HTML:

            <div class="fold">
                <div class="box pcbar">
                      <div class="box-content">
                         <div class="pc-input">

How to transition img up to emulate a spinning effect

Hi I'm trying to make something on my page similar to slot machine. I have a set of icons I want to use and have them slide up into a placeholder div and then slide up and out of the placeholder. I saw some jquery that look a bit too complicated for what I need to do. I've looked up transitions and found the code below, but I don't know how to go about making the image that slides up and out of the placeholder.

@keyframes myfirst
{
0%   {background-img: img1.jpg; left:0px; top:0px; visibility: visible;}
25%  {background-img: img1.jpg; left:0px; top:128px; visibility: none;}

3 item spacing

I'm working on a website. My total width is 64em (1024px). Next I have a google map widget that is 18.75em (300px) in height and and auto width.

Underneath the widget are three boxes. I'm new to CSS and I'm having trouble with getting the left and right box on the edge and equal spacing in between. I'm trying the boxes similar to this website. I'm not keeping the color scheme. I was messing around with opacity.

Anyone know how to get this?

<div class="content_frame">
    	<?php include('includes/header.php');  ?>

Syndicate content